无缝滚动 Js
js 无缝切换
CSS .clearfix { clear: both; } .banner { width: 500px; height: 500px; overflow: hidden; margin: 0 auto; position: relative; background: url(../img/loading.gif) no-repeat center;} .banner ul { height: 500px;} .banner li {position: absolute; left: 500px; top: 0; width: 500px; height: 500px; list-style: none; z-index: 5;} .bannerspan { text-align: center; position: absolute; bottom: 10px; left: 0px; width: 500px; z-index: 11;} .bannerspan span { display: inline-block; width: 10px; height: 10px; border-radius: 5px; background: #0ff; margin: 0 3px; cursor: pointer;} .bannerspan span.on { background: #f0f;}
JS:
$(function(){ var li = $(".banner li"), _span = $(".bannerspan"), imgLength = li.length, time; // 生成圆点 for(var i = 0; i < imgLength; i++){ _span.append("<span></span>"); } // 初始 function init(){ li.eq(0).css("left",0).addClass("active"); _span.find("span").eq(0).addClass("on"); } init(); // 点击圆点事件 _span.find("span").click(function(){ clearInterval(time); run($(this).index()); }) // 获取当前展示的索引值 index function getActiveIndex(){ var j; li.each(function(e){ if($(this).hasClass("active")){ j = e; return; } }) return j; } run(1) // 公共函数 function run(dx){ li.eq(getActiveIndex()).stop().animate({left: -500, ‘z-index‘: 5}, 500,function(){ $(this).css("left",500) }); li.eq(dx).stop().animate({‘z-index‘: 10, left: 0}, 500, function(){ $(this).addClass("active").siblings().removeClass("active").css("left",500); }); _span.find("span").eq(dx).addClass("on").siblings().removeClass("on"); dx++; time = setTimeout(function(){ run(dx % imgLength) }, 2000) } })
截图
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。