标签：左右 ons 方式 20px z-index ann sel 使用 元素
由于经常使用插件来制作轮播图，所以把这个轮播图的代码记好。使用了淡入淡出的方式
HTML:
<div class="Slides"> <ul class="pics"> <li ><img src="img/banner1.jpg" width="1920px" height="500px"></li> <li ><img src="img/banner1.jpg" width="1920px" height="500px"></li> <li ><img src="img/banner1.jpg" width="1920px" height="500px"></li> </ul> <div id="buttons"> <span class="picsli on" index="1"></span> <span class="picsli" index="1"></span> <span class="picsli" index="1"></span> </div> <a id="prev" class="unslider-arrow04 prev "><img src="img/l.png"></a> <a id="next" class="unslider-arrow04 next"><img src="img/r.png"></a> </div>
CSS:
.Slides{
border-top:10px solid #533336;
clear: both;
position: relative;
}
.pics{
width: 1920px;
height: 500px;
overflow: hidden;
}
#buttons{
position: absolute;
height: 10px;
width: 100px;
z-index:2;
bottom: 80px;
left: 50%;
margin-left: -36px ;
}
#buttons .on {
background: #fff;
}
#buttons span{
cursor: pointer;
float: left;
border: 2px solid #fff;
width: 18px;
height: 18px;
border-radius: 50%;
background: #333;
margin-right: 8px;
}
#next{
position: absolute;
right: 0;
top: 40%;
}
#next :hover{
background-color: white;
opacity: 0.5%;
}
#prev{
position: absolute;
float: left;
top: 40%;
}
#prev :hover{
background-color: white;
opacity: 0.5%;
}
JQ:
$(function(){ //赋予变量 var i = 0; function run(){ i++; //判断，让图片循环播放，还可以用三元表达式写 // if(i==5){ // i=0; // }; i= (i==3)?0:i; // 让i号图片显示，让它的兄弟元素隐藏 $(".pics li").eq(i).fadeIn(1000).siblings("li").fadeOut(1000); //让li变红 $("#buttons span").eq(i).addClass("on").siblings("span").removeClass("on"); } //设置定时器，自动轮播 var timer = setInterval(run,5000); //给鼠标加入移入事件 $(".pics li").mouseenter(function(){ var jqthis = $(this); clearInterval(timer); //鼠标快速移动小bug tt = setTimeout(function(){ //停止定时器 //如果$(this)写在定时器里，那它指向的就是定时器 i = jqthis.index(); // 让i号图片显示，让它的兄弟元素隐藏,stop()清除累加动作； $(".pics li").eq(i).stop().fadeIn(1000).siblings("li").stop().fadeOut(1000); //让li变红 $("#buttons span").eq(i).addClass("on").siblings("span").removeClass("on"); },200) }) //鼠标移出事件 $(".pics li").mouseleave(function(){ //清除定时炸弹，这是为了解决鼠标快速滑动的小bug clearTimeout(tt); //恢复定时器 timer = setInterval(run,5000); }) //左右切换 $("#prev").click(function(){ clearInterval(timer); i--; //判断，让图片循环播放，还可以用三元表达式写 // if(i==-1){ // i=4; // }; i= (i==-1)?2:i; // 让i号图片显示，让它的兄弟元素隐藏 $(".pics li").eq(i).stop().fadeIn(1000).siblings("li").stop().fadeOut(1000); //让li变红 $("#buttons span").eq(i).addClass("on").siblings("span").removeClass("on"); }); $("#next").click(function(){ clearInterval(timer); //debugger run(); }); })
标签：左右 ons 方式 20px z-index ann sel 使用 元素
原文地址：https://www.cnblogs.com/ZwjFronTend/p/9175907.html
