修改图片和jquery 还有对应宽度 即可用
实际放置图片要比放置图片多一张,当倒数第二张切换到最后一张刚完成的时候,瞬间把,整个ul移到left等于0的位置，接下来我们看到的就是第一张图片到第二张图片的切换，所以就没有了最后一张直接切换到第一张的那种别扭的情况了。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>无缝滚动 </title> <style> *{ margin: 0; padding: 0; } #slide-box{ position: relative; overflow-x: hidden; width: 615px; height: 420px; } ul,li{ margin: 0; padding: 0; } #slide-box>ul{ position: relative; width: 3000px; height: 420px; left: -0; } #slide-box>ul>li{ position: absolute; top: 0; } #slide-box .slide1{ left: 0 } #slide-box .slide2{ left: 615px; } #slide-box .slide3{ left: 1230px; } #slide-box .slide4{ left: 1845px; } #slide-box .slide5{ left: 2460px; } #slide-box .slide6{ left: 3075px; } </style> </head> <body> <div id="slide-box"> <ul> <li class="slide1"></li> <li class="slide2"></li> <li class="slide3"></li> <li class="slide4"></li> <li class="slide5"></li> <li class="slide6"></li> </ul> </div> <script src="js/jquery-mini.js"></script> <script> $(function(){ function slideImg(obj,width){//定时轮播无缝滚动 var children = obj.children('li').length - 1; setInterval(function(){ var left = parseInt(obj.css('left')); if(left<=-width*children){ obj.css('left',0); left = -width; }else{ left -= width; } left = left+ 'px'; obj.animate({left: left}); },2000) ;//每次滚动切换时间 } slideImg($('#slide-box').find('ul'),615); //传入ul和图片宽度 }) </script> </body> </html>
同类文章
<a href="http://www.jianshu.com/p/a3c71e0b55d6">前端垂直居中</a>
<a href="http://www.jianshu.com/p/8b30fe800b70">基于jquery的蒙层弹出框</a>
网友评论