溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本文實例為大家分享了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 ></li>
<li ></li>
<li ></li>
<li ></li>
<li ></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都會做了。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
