JavaScript实现图片无缝滚动与防闪烁优化
作者:交互手记时间:2026-10-23 09:30:31浏览:209
本文介绍使用HTML和CSS定位实现图片无缝滚动的具体方法,重点解决频繁点击按钮导致的图片闪换问题。通过限制定时器同时只能开启一个,并优化运动时间,确保双图切换效果流畅稳定。
无缝滚动实现原理
本文记录了在HTML中利用两个img元素实现多张图片无缝滚动的方案,供参考,具体内容如下
HTML结构如下:
<div class="wrap">
<ul class="list">
<li>
<img src="img/img0.png">
</li>
<li>
<img src="img/img1.png">
</li>
</ul>
<a href="javascript:;" class="prev">prev</a>
<a href="javascript:;" class="next">next</a>
</div>
CSS样式此处省略,改变图片位置的方法众多,本文采用定位方式并修改.list的left属性值。
JS代码如下:
(function(){
var list=document.querySelector(".list");
var imgs=document.querySelectorAll("img");
var prev=document.querySelector(".prev");
var next=document.querySelector(".next");
var imgW=css(imgs[0],"width");//使用封装好的css()获取img的宽度
var now=0;
var imgData=["img/img0.png",
"img/img1.png",
"img/img2.png",
"img/img3.png",];
prev.onclick=function(){
//找出接下来要显示的图片的下标
var prev=(now-1+imgData.length)%imgData.length;
//因为是从右往左运动,当前显示的应在右侧,即将显示的在左侧
imgs[0].src=imgData[prev];
imgs[1].src=imgData[now];
//使用封装好的css()设置list的位置
css(list,"left",-imgW);
//使用封装好的运动函数来控制图片移动
startMove(list,{left:0},2000,"easeOut");
now=prev;
}
next.onclick=function(){
var next=(now+1)%imgData.length;
imgs[0].src=imgData[now];
imgs[1].src=imgData[next];
css(list,"left",0);
startMove(list,{left:-imgW},2000,"easeOut");
now=next;
}
})();
解决图片闪换问题
至此基本功能已实现。然而频繁点击上一张/下一张按钮时,图片会在设定的运动时间内发生闪烁。解决此问题有两种方案:1.缩短运动时间,例如将2000ms调整为500ms;2.限制定时器仅能开启一个。
在现有JS代码基础上增加以下代码,以上一张操作为例,增加对定时器数量的判断逻辑。
var isMove=false;//记录定时器开关状态
prev.onclick=function(){
if(isMove){
return;
}
....上述上一张操作js代码
isMove=true;
startMove(list,{left:-imgW},2000,"easeOut",function(){
isMove=false;
});
}
以上为本文全部内容,希望对各位的学习有所启发,也欢迎大家多多支持本站。
作者最新文章
JS怎么实现页面强制刷新
2026-11-05 14:53:38
点击JS链接直接运行不下载?前端实现.js文件强制下载的三种方法
2026-11-05 12:12:23
怎么封装一个通用的JS创建元素辅助函数
2026-11-05 11:41:41
Swiper.js 怎么监听滑动结束并获取当前索引
2026-11-05 10:57:15
HTML、CSS和JS的关系:Web前端三件套怎么协作
2026-11-04 15:41:40
