本文介绍如何使用JavaScript实现图片列表的自动横向滚动效果，并支持鼠标悬停暂停、点击控制方向等交互功能。通过定义滚动宽度、位置变量及定时器，结合scrollLeft属性控制滚动条位置，实现平滑的自动播放与用户手动干预的无缝切换，适用于相册展示或新闻列表等场景。
复制代码按钮提示。
图片自动滚动特效代码实现
具体实现代码如下所示：
<!--
声明变量sh用于存储定时器ID。
设置滚动区域的可视宽度为533像素。
初始化左侧滚动位置变量preLeft和currentLeft为0，设置停止滚动标志stopscroll为false，获取限制值getlimit为0，以及顶部滚动位置preTop和currentTop为0。
定义向左滚动的函数scrollLeft()。
{
若停止滚动标志stopscroll为true，则直接返回，不执行滚动。
将当前滚动条左侧位置preLeft赋值为marquees元素的scrollLeft属性值。
将marquees元素的scrollLeft属性值增加2，实现向左滚动。
判断滚动前后的scrollLeft值是否相等，若相等说明滚动已到达边界。
{
注释掉的代码：若到达边界，可将scrollLeft重置为templayer的offsetWidth减去marqueesWidth再加1，以处理循环滚动逻辑。
}
}
定义向右滚动的函数scrollRight()。
{
若停止滚动标志stopscroll为true，则直接返回，不执行滚动。
将当前滚动条左侧位置preLeft赋值为marquees元素的scrollLeft属性值。
将marquees元素的scrollLeft属性值减少2，实现向右滚动。
判断滚动前后的scrollLeft值是否相等，若相等说明滚动已到达边界。
{
若获取限制标志getlimit为false，执行以下逻辑。
{
将marquees元素的scrollLeft重置为templayer的offsetWidth的两倍，用于重置滚动位置。
将当前marquees的scrollLeft值赋给getlimit，记录限制位置。
}
将marquees元素的scrollLeft值减少1，微调位置。
}
}
定义向左滚动控制的函数Left()。
{
将停止滚动标志stopscroll设置为false，允许滚动。
使用setInterval每20毫秒调用一次scrollLeft()函数，并将定时器ID赋值给sh。
}
定义向右滚动控制的函数Right()。
{
将停止滚动标志stopscroll设置为false，允许滚动。
使用setInterval每20毫秒调用一次scrollRight()函数，并将定时器ID赋值给sh。
}
定义停止滚动控制的函数StopScroll()。
{
将停止滚动标志stopscroll设置为true，禁止滚动。
使用clearInterval清除ID为sh的定时器，停止自动滚动。
}
定义选择类型并提交的函数SelectType(value)。
{
将表单sendForm中page字段的值设置为1。
将表单sendForm中type字段的值设置为传入的value参数。
提交表单sendForm，执行页面跳转或数据提交。
}
定义初始化函数init()。
{
使用with语句操作marquees元素，简化代码书写。
{
设置marquees元素的高度style.height为0。
设置marquees元素的宽度style.width为之前定义的marqueesWidth值。
设置marquees元素的水平溢出样式style.overflowX为hidden，隐藏超出部分。
设置marquees元素的垂直溢出样式style.overflowY为visible，允许垂直方向显示。
设置marquees元素的水平对齐方式style.align为center，居中对齐。
设置noWrap属性为true，禁止文本换行。
}
}
//-->提供文件打包下载链接。