jquery實現圖片平滑滾動詳解
編輯：JQuery入門技巧
本文實例為大家分享了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都會做了。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持。
小編推薦
熱門推薦