本文介绍了利用JavaScript实现图片无缝滚动的具体实现方案。通过setInterval开启间隔型定时器，结合clearTimeout管理生命周期，并运用offsetWidth和offsetLeft属性获取元素尺寸与位置，完成自动滚动逻辑。文章提供了完整的HTML结构与CSS样式配置，帮助开发者快速掌握前端动态效果实现技巧。
JavaScript无缝滚动实现概述
本文分享了一个使用JavaScript实现图片无缝滚动的完整示例，供读者参考学习。
核心API与DOM属性说明
实现该效果主要涉及以下关键知识点：
- 使用setInterval函数启动一个周期性执行的定时器。
- 使用clearTimeout函数来停止已启动的定时器。
- 通过offsetWidth属性读取元素的宽度值。
- 通过offsetLeft属性获取元素相对于父级容器的左侧偏移量。
HTML结构与CSS样式配置
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>无缝移动</title>
<style>
*{margin: 0; padding: 0;}
#div1{width:520px; height:170px; margin:20px auto; position: relative; /* !!! div1 的位置是相对的 */
background: pink; overflow: hidden} /* !!! overflow: hidden */
#div1 ul{position: absolute; left:0; top:0;} /* !!! ul 的 position:绝对的，控制left的值 */
#div1 ul li{float:left; width:130px; height:170px; list-style: none}
</style>
<script>
window.onload=function () {
var oDiv=document.getElementById('div1');
var oUl=oDiv.getElementsByTagName('ul')[0];
var aLi=oUl.getElementsByTagName('li');
var speed = 2;
oUl.innerHTML+=oUl.innerHTML; // 相当于 4*2 张图像在移动
oUl.style.width=aLi[0].offsetWidth * aLi.length + 'px'; // !!!!!! offsetWidth
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'; // !!!!!!!! offsetLeft
}
var Timer1= setInterval(Move, 30); // setInterval 开启间隔型定时器
oDiv.onmouseover=function () {
clearTimeout(Timer1);
};
oDiv.onmouseout=function () {
Timer1=setInterval(Move, 30);
};
document.getElementsByTagName('a')[0].onclick=function () {
speed=-2; // 向左的速度
};
document.getElementsByTagName('a')[1].onclick=function () {
speed=2; // 向右的速度
};
};
</script>
</head>
<body>
<a href="javascript:;" >向左移动</a>
<a href="javascript:;" >向右移动</a>
<div id="div1">
<ul>
<li><img src="img/aa.jpg"/></li>
<li><img src="img/bb.jpg"/></li>
<li><img src="img/cc.jpg"/></li>
<li><img src="img/dd.jpg"/></li>
</ul>
</div>
</body>
</html>总结与资源支持
以上内容涵盖了实现无缝滚动所需的核心技术点，希望对读者的学习有所启发，欢迎继续支持本站获取更多资源。