溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本文小編為大家詳細介紹“JavaScript基于定時器怎么實現圖片無縫滾動功能”，內容詳細，步驟清晰，細節處理妥當，希望這篇“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進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
