溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹了JavaScript基于定時器實現圖片無縫滾動功能的方法，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。
具體如下：
一、無縫滾動理論基礎
基礎知識
1.setInterval（function，time）、clearInterval（timer）
setInterval() 方法可按照指定的周期（以毫秒計）來調用函數或計算表達式。 setInterval() 方法會不停地調用函數，直到 clearInterval() 被調用或窗口被關閉。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的參數。
clearInterval() 方法可取消由 setInterval() 設置的 timeout。 clearInterval() 方法的參數必須是由 setInterval() 返回的 ID 值。
2.offsetLeft與style.left的區別
offsetLeft 獲取的是相對于父對象的左邊距
left 獲取或設置相對于 具有定位屬性(position定義為relative)的父對象 的左邊距
如果父div的position定義為relative,子div的position定義為absolute，那么子div的style.left的值是相對于父div的值，
這同offsetLeft是相同的，區別在于：
1. style.left 返回的是字符串，如28px，offsetLeft返回的是數值28，如果需要對取得的值進行計算，還用offsetLeft比較方便。
2. style.left是讀寫的，offsetLeft是只讀的，所以要改變div的位置，只能修改style.left。
3. style.left的值需要事先定義，否則取到的值為空。而且必須要定義在html里，我做過試驗，如果定義在css里，style.left的值仍然 為空，這就是我剛開始碰到的問題，總是取不到style.left的值。
offsetLeft則仍然能夠取到，無需事先定義div的位置。
二、代碼片段
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>無縫滾動</title>
<style>
*{
margin: 0;
padding: 0;
}
#div2{
width: 400px;
margin: 100px auto;
}
input{
margin:0 auto;
text-align: center;
margin-left: 80px;
font-size: 40px;
}
#div1{
width: 712px;
height: 108px;
margin: 100px auto;
position: relative;
background-color: red;
overflow: hidden;
}
#div1 ul{
position: absolute;
left: 0;
top: 0;
}
#div1 ul li{
float: left;
width: 178px;
height: 108px;
list-style:none;
}
</style>
<script>
window.onload=function(){
var oDiv=document.getElementById('div1');
var oUl=document.getElementsByTagName('ul')[0];
var aLi=oUl.getElementsByTagName('li');
var lBtn=document.getElementById('lbtn');
var rBtn=document.getElementById('rbtn');
//將ul復制一份相加復制給ul（這樣ul相當于有8張圖片）
oUl.innerHTML=oUl.innerHTML+oUl.innerHTML;
oUl.style.width=aLi[0].offsetWidth*aLi.length+'px';
//speed控制圖片移動方向和速度
var speed=2;
function move(){
if(oUl.offsetLeft<-oUl.offsetWidth/2){
oUl.style.left=0;
}
if(oUl.offsetLeft>0)
{
oUl.style.left=-oUl.offsetWidth/2+'px';
}
oUl.style.left=oUl.offsetLeft+speed+'px';
}
var timer=setInterval(move,30);
// 鼠標移進時，圖片停止運動
oDiv.onmouseover=function(){
clearInterval(timer);
};
//鼠標移出時，圖片繼續移動
oDiv.onmouseout=function(){
timer=setInterval(move,30);
}
//按鈕控制移動方向
lBtn.onclick= function () {
speed=-2;
}
rBtn.onclick=function(){
speed=2;
}
};
</script>
</head>
<body>
<div id="div2" >
<input type="button" value="向左" id="lbtn"/>
<input type="button" value="向右" id="rbtn"/>
</div>
<div id="div1">
<ul>
<li><img src="images/1.jpg" /></li>
<li><img src="images/2.jpg" /></li>
<li><img src="images/3.jpg" /></li>
<li><img src="images/4.jpg" /></li>
</ul>
</div>
</body>
</html>三、效果圖
感謝你能夠認真閱讀完這篇文章，希望小編分享的“JavaScript基于定時器實現圖片無縫滾動功能的方法”這篇文章對大家有幫助，同時也希望大家多多支持億速云，關注億速云行業資訊頻道，更多相關知識等著你來學習!
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
