本文详细介绍如何使用 JavaScript 实现图片无缝滚动特效。核心功能包括页面加载后自动滚动、通过按钮控制方向、鼠标悬停暂停、点击小图切换大图及文字同步显示。文中提供了关键代码逻辑，如利用 innerHTML 复制列表实现无缝循环，以及 setInterval 和 clearInterval 控制播放状态，适合前端开发者参考学习。
无缝滚动功能概述
本文分享一个使用 JavaScript 实现图片无缝滚动效果的完整案例，包含所需功能说明及关键代码，供读者参考学习。
运行效果如下图所示：
核心功能需求
结合已学的知识，进行一个综合性的扩展练习。主要功能需求如下：
- 1. 页面加载后，图片列表自动进行滚动展示。
- 2. 点击左右方向按钮，可以切换图片滚动的方向（通过改变 left 值的正负号实现）。
- 3. 当鼠标移入或移出图片区域时，控制滚动的暂停与继续（通过 setInterval 和 clearInterval 实现）。
- 4. 鼠标悬停在图片上时，图片呈现高亮状态（利用 a:hover 样式）。
- 5. 点击缩略图时，下方显示对应的大图。
- 6. 文字区域随图片切换而更新（此功能尚未完全实现，仍有优化空间）。
具体实现代码如下：
关键代码实现
window.onload = function(){
//声明部分( 现在的习惯是要写什么声明什么， 一起写容易搞忘了。。也不知道好不好这样)
var oDiv = document.getElementById('box');
var oUl = oDiv.getElementsByTagName('ul');
var oLi = oUl.getElementsByTagName('li');
var speed = 2;
var timer = null;
//让ul的内容增一倍，从而实现无缝滚动
oUl.innerHTML = oUl.innerHTML + oUl.innerHTML;
oUl.style.width = oLi[1].offsetWidth * oLi.length + 'px';
//move函数
function move(){
oUl.style.left = oUl.offsetLeft + speed + 'px';
//控制左
if(oUl.offsetLeft < -oUl.offsetWidth/2){
oUl.style.left = 0;
}
//控制右
if(oUl.offsetLeft > 0){
oUl.style.left = -oUl.offsetWidth/2 + 'px';
}
}
//图标点击~ 控制移动方向
var oLeft = document.getElementById('jt_left');
var oRight= document.getElementById('jt_right');
oLeft.onclick = function(){
speed = -2;
}
oRight.onclick = function(){
speed = 2;
}
//鼠标移入移出效果
oDiv.onmouseover = function(){
clearInterval(timer);
}
oDiv.onmouseout = function(){
timer = setInterval(move,20);
}
timer = setInterval(move,20);
//点击获取大图
var aA = oDiv.getElementsByTagName('a');
for(var i=0;i<aA.length;i++){
aA[i].onclick = function(){
showPic(this);
return false;
}
}
function showPic(whichpic){
var source = whichpic.href;
var placeholder = document.getElementById('placeholder');
placeholder.src = source;
}
}
不足与改进方向
关于文字替换效果，原本尝试通过图片方式让文本框对应的数字随之变化，但未能成功实现，具体原因尚不明确，该部分仍需改进。希望大家能提供建议。不过，JavaScript 实现的无缝滚动功能已正常运行，希望对各位有所帮助。