使用Javascript实现左右滚动效果

在网页开发中，我们经常会遇到需要左右滚动的元素，如轮播图、新闻列表等。用Javascript实现左右滚动效果是比较简单的。

实现方法

实现左右滚动效果的方法有很多，下面介绍两种常用的方法。

单个元素左右滚动

如果要让单个元素左右滚动，可以通过改变元素的left属性值实现。下面是一个简单的例子：

<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); // 先清除之前设置的定时器
intervalId = setInterval(function() {
var currentLeft = parseInt(listEle.style.left);
if (currentLeft >-listEle.offsetWidth + scrollEle.offsetWidth) {  // 判断是否到达最左侧 
listEle.style.left = currentLeft - 5 + "px";
} else {
listEle.style.left = scrollEle.offsetWidth + "px"; // 到达最左侧后，重置到最右侧
}
}, 30);
}
function stopScroll() {
clearInterval(intervalId);
}
scrollEle.addEventListener("mouseenter", stopScroll);
scrollEle.addEventListener("mouseleave", scrollLeft);
scrollLeft(); // 初始化左侧滚动
 </script>

这个例子中，我们先获取到scroll和list两个元素，然后通过定时器不断改变list元素的left属性值，从而实现左侧滚动。当list元素到达最左侧时，我们将其left属性值重置为scroll元素的宽度，实现循环滚动。当鼠标移入scroll元素时，停止滚动；当鼠标移出scroll元素时，重新开始左侧滚动。

多个元素左右滚动

如果要让多个元素左右滚动，可以将这些元素放在一个容器中，然后改变容器的left属性值实现。下面是一个例子：

<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); // 先清除之前设置的定时器
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; // 到达最左侧后，将第一个元素移到最后面，重置left属性值为0
}
}, 30);
}
function stopScroll() {
clearInterval(intervalId);
}
scrollBox.addEventListener("mouseenter", stopScroll);
scrollBox.addEventListener("mouseleave", scrollLeft);
scrollLeft(); // 初始化左侧滚动
</script>

这个例子中，我们先获取到scroll-box和items两个元素，然后通过定时器不断改变scroll-box元素的left属性值，从而实现左侧滚动。当scroll-box元素到达最左侧时，我们将第一个元素移到最后面，重置scroll-box元素的left属性值为0，实现循环滚动。当鼠标移入scroll-box元素时，停止滚动；当鼠标移出scroll-box元素时，重新开始左侧滚动。

注意事项

在实现左右滚动效果时，需要注意以下几点：

• 要确保元素的position属性值为relative或absolute，否则left属性无效。
• 要确保容器的宽度小于滚动元素的总宽度，否则无法滚动。
• 要防止多次设置定时器，避免出现滚动速度过快的情况。

总结

Javascript通过改变元素的left属性实现左右滚动效果比较简单，但要注意以上几个问题。左右滚动效果在轮播图、新闻列表等场景中应用广泛。