jquery 焦点轮播图控制每张图片停留不同时间
轮播代码是代签博客园一位前辈写的代码,这里作了点小修改,实现了每张图片停留不同时间
*{ padding:0px; border:0px; margin:0px; } ul { list-style:none; } .slideBox { margin:50px auto; width:300px; height:480px; box-shadow:2px 2px 10px #C38DD4; border-radius:20px; position:relative; overflow:hidden; } .slideBox ul { position:relative; width:2000px;} .slideBox ul li { float:left; width:300px; height:480px; position:relative; } .spanBox { position:absolute; width:300px; height:20px; bottom:10px; left:80px; } .spanBox span { width:18px; height:18px; margin-left:5px; background-color:rgba(201,178,207,1.00); float:left; line-height:16px; text-align:center; text-shadow:2px 2px 2px #C5EBF0; font-family:cabin-sketch; font-size:15px; } .slideBox .spanBox .active { background-color:rgba(155,83,244,0.79); border:solid 1px #BEEBEC; border-radius:4px; } .prev { position:absolute; left:0px; top:320px; float:left; border-left:solid 1px rgba(251,245,246,1.00); opacity:0.5; } .next { width:15px; height:50px; position:absolute; right:40px; top:320px; float:right; border-right:solid 1px rgba(245,237,237,1.00); opacity:0.5 }
<div class="slideBox"> <ul> <li><img src="images/chrome.png" alt="" width="300" height="480"/></li> <li><img src="images/firefox.png" alt="" width="300" height="480"/></li> <li><img src="images/chrome.png" alt="" width="300" height="480"/></li> <li><img src="images/firefox.png" alt="" width="300" height="480"/></li> <li><img src="images/chrome.png" alt="" width="300" height="480"/></li> <li><img src="images/firefox.png" alt="" width="300" height="480"/></li> </ul> <div class="spanBox"> <span class="active">q</span> <span>a</span> <span>z</span> <span>w</span> <span>s</span> <span>x</span> </div> <div class="prev"><img src="images/limit-top.png" width="50" height="50" alt=""/></div> <div class="next"><img src="images/limit-top.png" width="50" height="50" alt=""/></div> </div>
$(document).ready(function(){ var slideBox = $(".slideBox"); var ul = slideBox.find("ul"); var oneWidth = slideBox.find("ul li").eq(0).width(); var number = slideBox.find(".spanBox span"); //注意分号 和逗号的用法 var timer = null; var sw = 0; //每个span绑定click事件,完成切换颜色和动画,以及读取参数值 number.on("click",function (){ $(this).addClass("active").siblings("span").removeClass("active"); sw=$(this).index(); ul.animate({ "right":oneWidth*sw, //ul标签的动画为向左移动; }); }); //左右按钮的控制效果 /*$(".next").stop(true,true).click(function (){ sw++; if(sw==number.length){sw=0}; number.eq(sw).trigger("click"); }); $(".prev").stop(true,true).click(function (){ sw--; if(sw==number.length){sw=0}; number.eq(sw).trigger("click"); });*/ var a = [2,4,5,1,7,1]; var currentMii = a[sw]; var count = 0; //定时器的使用,自动开始 timer = setInterval(function (){ if(count >= currentMii){ sw++; if(sw==number.length){sw=0}; number.eq(sw).trigger("click"); currentMii = a[sw]; count = 0; } count++; console.log(count); },1000); //hover事件完成悬停和,左右图标的动画效果 /*slideBox.hover(function(){ $(".next,.prev").animate({ "opacity":1, },200); clearInterval(timer); },function(){ $(".next,.prev").animate({ "opacity":0.5, },500); timer = setInterval(function (){ sw++; if(sw==number.length){sw=0}; number.eq(sw).trigger("click"); },2000); })*/ })