使用Javascript实现左右滚动效果

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

实现方法

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

单个元素左右滚动

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

<div id="scroll" ><ul ><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" ><div ><div >1</div><div >2</div><div >3</div><div >4</div><div >5</div><div >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属性实现左右滚动效果比较简单，但要注意以上几个问题。左右滚动效果在轮播图、新闻列表等场景中应用广泛。