使用Javascript實(shí)現(xiàn)左右滾動(dòng)效果

在網(wǎng)頁開發(fā)中，我們經(jīng)常會(huì)遇到需要左右滾動(dòng)的元素，如輪播圖、新聞列表等。用Javascript實(shí)現(xiàn)左右滾動(dòng)效果是比較簡(jiǎn)單的。

實(shí)現(xiàn)方法

實(shí)現(xiàn)左右滾動(dòng)效果的方法有很多，下面介紹兩種常用的方法。

單個(gè)元素左右滾動(dòng)

如果要讓單個(gè)元素左右滾動(dòng)，可以通過改變?cè)氐膌eft屬性值實(shí)現(xiàn)。下面是一個(gè)簡(jiǎn)單的例子：

<div id="scroll" style="position: relative; width: 300px; overflow: hidden;">
<ul style="position: absolute; left: 0; top: 0;">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</div>
<script>
var scrollEle = document.getElementById("scroll");
var listEle = scrollEle.getElementsByTagName("ul")[0];
var intervalId;
function scrollLeft() {
clearInterval(intervalId); // 先清除之前設(shè)置的定時(shí)器
intervalId = setInterval(function() {
var currentLeft = parseInt(listEle.style.left);
if (currentLeft >-listEle.offsetWidth + scrollEle.offsetWidth) {  // 判斷是否到達(dá)最左側(cè) 
listEle.style.left = currentLeft - 5 + "px";
} else {
listEle.style.left = scrollEle.offsetWidth + "px"; // 到達(dá)最左側(cè)后，重置到最右側(cè)
}
}, 30);
}
function stopScroll() {
clearInterval(intervalId);
}
scrollEle.addEventListener("mouseenter", stopScroll);
scrollEle.addEventListener("mouseleave", scrollLeft);
scrollLeft(); // 初始化左側(cè)滾動(dòng)
 </script>

這個(gè)例子中，我們先獲取到scroll和list兩個(gè)元素，然后通過定時(shí)器不斷改變list元素的left屬性值，從而實(shí)現(xiàn)左側(cè)滾動(dòng)。當(dāng)list元素到達(dá)最左側(cè)時(shí)，我們將其left屬性值重置為scroll元素的寬度，實(shí)現(xiàn)循環(huán)滾動(dòng)。當(dāng)鼠標(biāo)移入scroll元素時(shí)，停止?jié)L動(dòng)；當(dāng)鼠標(biāo)移出scroll元素時(shí)，重新開始左側(cè)滾動(dòng)。

多個(gè)元素左右滾動(dòng)

如果要讓多個(gè)元素左右滾動(dòng)，可以將這些元素放在一個(gè)容器中，然后改變?nèi)萜鞯膌eft屬性值實(shí)現(xiàn)。下面是一個(gè)例子：

<div id="scroll-box" style="position: relative; width: 300px; overflow: hidden;">
<div style="position: absolute; left: 0; top: 0;">
<div class="scroll-item">1</div>
<div class="scroll-item">2</div>
<div class="scroll-item">3</div>
<div class="scroll-item">4</div>
<div class="scroll-item">5</div>
<div class="scroll-item">6</div>
</div>
</div>
<script>
var scrollBox = document.getElementById("scroll-box");
var items = scrollBox.getElementsByClassName("scroll-item");
var intervalId;
function scrollLeft() {
clearInterval(intervalId); // 先清除之前設(shè)置的定時(shí)器
intervalId = setInterval(function() {
var currentLeft = parseInt(scrollBox.style.left);
if (currentLeft >-items[0].offsetLeft) {
scrollBox.style.left = currentLeft - 5 + "px";
} else {
scrollBox.appendChild(items[0]);
scrollBox.style.left = 0; // 到達(dá)最左側(cè)后，將第一個(gè)元素移到最后面，重置left屬性值為0
}
}, 30);
}
function stopScroll() {
clearInterval(intervalId);
}
scrollBox.addEventListener("mouseenter", stopScroll);
scrollBox.addEventListener("mouseleave", scrollLeft);
scrollLeft(); // 初始化左側(cè)滾動(dòng)
</script>

這個(gè)例子中，我們先獲取到scroll-box和items兩個(gè)元素，然后通過定時(shí)器不斷改變scroll-box元素的left屬性值，從而實(shí)現(xiàn)左側(cè)滾動(dòng)。當(dāng)scroll-box元素到達(dá)最左側(cè)時(shí)，我們將第一個(gè)元素移到最后面，重置scroll-box元素的left屬性值為0，實(shí)現(xiàn)循環(huán)滾動(dòng)。當(dāng)鼠標(biāo)移入scroll-box元素時(shí)，停止?jié)L動(dòng)；當(dāng)鼠標(biāo)移出scroll-box元素時(shí)，重新開始左側(cè)滾動(dòng)。

注意事項(xiàng)

在實(shí)現(xiàn)左右滾動(dòng)效果時(shí)，需要注意以下幾點(diǎn)：

• 要確保元素的position屬性值為relative或absolute，否則left屬性無效。
• 要確保容器的寬度小于滾動(dòng)元素的總寬度，否則無法滾動(dòng)。
• 要防止多次設(shè)置定時(shí)器，避免出現(xiàn)滾動(dòng)速度過快的情況。

總結(jié)

Javascript通過改變?cè)氐膌eft屬性實(shí)現(xiàn)左右滾動(dòng)效果比較簡(jiǎn)單，但要注意以上幾個(gè)問題。左右滾動(dòng)效果在輪播圖、新聞列表等場(chǎng)景中應(yīng)用廣泛。