提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  前端

当前栏目

JQuery图片滚动轮播示例代码

jQuery代码 代码 图片 示例 jQuery 滚动 轮播
2023-06-13 09:15:24 时间
完整的项目在附件中
复制代码代码如下:

<!DOCTYPEhtml>
<html>
<head>
<title>图片切换</title>
<scripttype="text/javascript"src="js/jquery-1.11.0.min.js"></script>
<scripttype="text/javascript">
varnum=0
$(function(){
$("divolli").mouseover(function(e){
$(this).attr("class","current");
$(this).siblings().attr("class","");//兄弟节点的class属性设置为空
//alert($("ul").index())
num=$("ul").index()+2
varindex=$(this).index();//记录选定的li标签在ul中的索引
//图片会出现层叠现象为了显示当前的图片，把当前的图片的z-index值设置为大于其他的兄弟元素
$("divulli").eq(index).css({"left":"650px","zIndex":num})
$("divulli").eq(index).siblings().css("zIndex",num-1);
//动画效果，图片从右侧飞入
$("divulli").eq(index).animate({left:"0"},500)

});

});
</script>
<styletype="text/css">
*{margin:0px;padding:0px;border:0px;}
ul,ol{list-style:none;}
.all{width:650px;height:250px;margin:100pxauto;position:relative;border:1pxsolidcrimson;overflow:hidden;}
.allul{position:relative;z-index:1;position:relative;}

/*子绝父相*/
.allulli{position:absolute;left:0;top:0px;}

.allol{position:absolute;z-index:2;right:10px;bottom:10px;}
.allolli{width:20px;height:20px;background:#333;border:1pxsolid#509629;font-weight:
bold;text-align:center;line-height:20px;float:left;margin-left:10px;margin-top:10px;}

.allol.current{width:30px;height:30px;line-height:30px;border:1pxsolidred;margin-top:0px;
cursor:pointer;}
</style>
</head>
<body>
<divclass="all">
<ul>
<li><imgsrc="src/1.jpg"/></li>
<li><imgsrc="src/2.jpg"/></li>
<li><imgsrc="src/3.jpg"/></li>
<li><imgsrc="src/4.jpg"/></li>
</ul>
<ol>
<liclass="current">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ol>
</div>
</body>
</html>

相关文章