<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title>多张图无缝滚动</title> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> <script> $(function(){ //如果要使一个元素运动起来，一般情况下这个元素需要具有position属性值可以是absolute/relative var oul = $('.wrap ul'); //获取字符然后相加就是新的oul var oulhtml = oul.html(); oul.html(oulhtml+oulhtml); var speed = 2; var timeId = null; var ali = $('.wrap ul li'); var aliWidth = ali.eq(0).width(); var aliSize = ali.size(); var ulWidth = aliWidth*aliSize; oul.width(ulWidth); function slider(){ if(speed<0){ //无缝向左滚动 if(oul.css('left')==-ulWidth/2+'px'){ oul.css('left',0); }else{ oul.css('left','+=-2px'); } }else{ //无缝向右滚动 if(oul.css('left')=='0px'){ oul.css('left',-ulWidth/2+'px') }else{ oul.css('left','+='+speed+'px'); } } }; //setInterval函数的作用是每隔一段时间执行该函数里的代码 timeId = setInterval(slider,30); $('.wrap').mouseover(function() { //clearInterval函数的作用是用来清除定时器 clearInterval(timeId); }).mouseout(function(){ timeId = setInterval(slider,30); }); $('.goLeft').click(function() { speed = -2; }); $('.goRight').click(function() { speed = 2; }); }); </script> <style> *{padding: 0;margin: 0} li{list-style: none;} body{margin: 50px;} .wrap{border: 3px solid #f00; width: 800px;height: 200px; margin: 0 auto;position: relative; overflow: hidden;} .wrap ul{overflow: hidden; _height:1px;width: 1600px;position: absolute;left: 0;top:0;} .wrap ul li{float: left;} </style> </head> <body> <a href="javascript:;" class="goLeft">向左走</a> <a href="javascript:;" class="goRight">向右走</a> <div class="wrap"> <ul> <li><img src="1.jpg" alt="" /></li> <li><img src="2.jpg" alt="" /></li> <li><img src="3.jpg" alt="" /></li> <li><img src="4.jpg" alt="" /></li> <li><img src="5.jpg" alt="" /></li> </ul> </div> </body> </html>