首页 > 代码库 > jQuery 无缝轮播
jQuery 无缝轮播
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><style>.bg{background: #FFF;}*{margin: 0;padding: 0;} ol,ul{list-style: none;}#play{width: 800px;height:532px;position: relative;overflow: hidden;}#play #ul{position: absolute;}#play #ul li{float: left;}#play #ul li img{width: 800px; height:532px;}#play #ol{width:100px;position: absolute;top:500px;left:360px;}#play #ol li{width: 15px;height: 15px;border-radius: 50%;float: left;margin: 3px;border:1px solid red;}#play #prev{ display:none;border:none;position: absolute;top:250px;width:30px;font-size: 40px;left:15px;background:rgba(0,0,0,0.5)}#play #next{ display:none;border:none;position: absolute;top:250px;width:30px;font-size: 40px;right:15px;background:rgba(0,0,0,0.5)}</style><script src="http://www.mamicode.com/jquery-1.8.3/jquery.min.js"></script></head><body><div id="play"> <ul id="ul"> <li><img src="http://www.mamicode.com/images/1.jpg" ></li> <li><img src="http://www.mamicode.com/images/2.jpg" ></li> <li><img src="http://www.mamicode.com/images/3.jpg" ></li> <li><img src="http://www.mamicode.com/images/4.jpg" ></li> </ul> <ol id="ol"> <li class="bg"></li> <li></li> <li></li> <li></li> </ol> <button id="prev"><</button> <button id="next">></button></div> <script> // 获取第一个图片 节点对象 var firstImg = $(‘#ul li‘).first().clone(); // 放在 ul 的最后 $(‘#ul‘).append(firstImg).width($(‘#ul li‘).length*$(‘#ul img‘).width()); var i = 0; var timer; autoPlay(); // 下一张 $(‘#next‘).click(function(){ i++; moveImg(i); }) // 上一张 $(‘#prev‘).click(function(){ i--; moveImg(i); }) // auto play function autoPlay(){ timer = setInterval(function(){ i++; moveImg(i); }, 1000); } function moveImg(num){ // 如果是最后一张图片我们怎么办 if(i==$(‘#ul li‘).length){ i = 1; $(‘#ul‘).css({left:0}); } // 是第一张 if(i==-1){ i=$(‘#ul li‘).length-2; $(‘#ul‘).css({left:($(‘#ul li‘).length-1)*-800}); } // 移动图片 $(‘#ul‘).stop().animate({left:i*-800},400); // 换小点的标记 if(i==($(‘#ul li‘).length-1)){ $(‘#ol li‘).eq(0).addClass(‘bg‘).siblings().removeClass(‘bg‘); }else{ $(‘#ol li‘).eq(i).addClass(‘bg‘).siblings().removeClass(‘bg‘); } } $(‘#play‘).mouseover(function(){ $(‘#prev‘).show(); $(‘#next‘).show(); clearInterval(timer); }).mouseout(function(){ $(‘#prev‘).hide(); $(‘#next‘).hide(); autoPlay(); }) // 点击小图标 跳转到指定的页面 $(‘#ol li‘).click(function(){ i = $(this).index(); moveImg(i); })</script></body></html>
jQuery 无缝轮播
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。