本文實例為大家分享了jquery圖片平滑滾動效果的具體代碼，供大家參考，具體內容如下
隨便寫了個DOM，沒有美觀性，見諒
原理：
1、定義兩組ul列表放圖，第一個ul放5張圖，第二個ul為空
2、為什么要用兩個ul？因為要用到jQuery的克隆方法clone()。把第一個ul的圖片全部克隆到第二個ul中，形成并列無縫滾動效果
3、.box設置為絕對定位，.wrap設置為相對定位
4、設置定時器，讓.box的left值一直減-，當left值大于第一個ul的長度時，讓他left等于0，然后再重新重置定時器，繼續執行
代碼部分：
//CSS
*{margin: 0;padding: 0}ul{list-style: none}.box ul li{display: block;float: left;width: 300px;height: 300px;margin-right: -1px;background-size: cover;background-position: center center;}.box{height: 300px;width:3010px;}#box1,#box2{float: left}.wrap{position: relative;width: 800px;margin: auto;height: 300px;overflow: hidden}.box{position: absolute;left: 0;}//HTML
<body> <div class="wrap"> <div class="box"> <ul id="box1"> <li style="background:url(images/1.jpg) no-repeat"></li> <li style="background:url(images/2.jpg) no-repeat"></li> <li style="background:url(images/3.jpg) no-repeat"></li> <li style="background:url(images/4.jpg) no-repeat"></li> <li style="background:url(images/5.jpg) no-repeat"></li> </ul> <ul id="box2"></ul> </div> </div></body>
//JQUERY
<script> var timer='';//設置一個定時器 var $box1=$('#box1').children().clone(true);/*克隆box1的子元素*/ $('#box2').append($box1);//將復制的元素插入到#box2中 var $left=parseInt($('.box').css('left'));//獲取.box的left值 var scroll=function(){ $left-=2;//設置滾動速度為2 $('.box').css('left',$left+'px');//left賦值 if($left<-1500){//當box值小于-1500px時，重置.box left值為0； $('.box').css('left','0'); $left=0; } timer =setTimeout(scroll,30); } setTimeout(scroll,100); $('.wrap').hover(function(){ clearTimeout(timer); },function(){ setTimeout(scroll,100); });</script>主要是理解思路，思路理清了，相信你不用看dom都會做了。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
