码迷,mamicode.com
首页 > Web开发 > 详细

无缝滚动 Js

时间:2015-05-12 12:56:53      阅读:144      评论:0      收藏:0      [点我收藏+]

标签:

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) } })
截图
技术分享

 

 

无缝滚动 Js

标签:

原文地址:http://www.cnblogs.com/do-it/p/3482625.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!