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; 
 });
}

以上为本文全部内容,希望对各位的学习有所启发,也欢迎大家多多支持本站。

作者最新文章