jQery无缝滚动效果
思路:
赋值所有li,添加到ul末尾,重新计算ul宽度
每次移动一个固定的值,当超出一半时,将ul拉回原位
以下代码
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>无缝滚动</title> <style type="text/css"> *{ margin: 0; padding: 0; } img{ display: block; } ul,li{ list-style: none; } #box{ width: 440px; height: 88px; margin: 50px auto; border: 3px solid #DCDCDC; position: relative; overflow: hidden; } #list{ position: absolute; } #list li{ float: left; width: 88px; height: 88px; } </style> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> <script type="text/javascript"> $(function(){ //将ul的内容复制一遍添加到ul中, $('#list').append($('#list').html()); //改变list的长度 $('#list').width($('#list li').eq(0).width() * $('#list li').length) setInterval(move,10) }) var x = 0; //每次移动的长度 function move(){ //判读超过ul的一半,拉回来重新开始 if(x <= -($('#list').width()/2)){ x = 0; } $('#list').css('left',x) x-=1; } </script> </head> <body> <div id="box"> <ul id="list"> <li><img src="img/1.jpg" alt="" /></li> <li><img src="img/2.jpg" alt="" /></li> <li><img src="img/3.jpg" alt="" /></li> <li><img src="img/4.jpg" alt="" /></li> <li><img src="img/5.jpg" alt="" /></li> </ul> </div> </body> </html>
代码的世界水太深,潜行的心态很纯真!