js实现无缝滚动双图切换效果


Posted in Javascript onJuly 09, 2019

本文记录的是在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; 
 });
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
原生Js实现按的数据源均分时间点幻灯片效果(已封装)
Dec 28 Javascript
Json字符串转换为JS对象的高效方法实例
May 01 Javascript
解析Javascript小括号“()”的多义性
Dec 03 Javascript
jQuery中:first-child选择器用法实例
Dec 31 Javascript
angularjs学习笔记之完整的项目结构
Sep 26 Javascript
详解JavaScript正则表达式之分组匹配及反向引用
Mar 09 Javascript
Bootstrap的class样式小结
Dec 01 Javascript
javascript实现页面滚屏效果
Jan 17 Javascript
js实现导航吸顶效果
Feb 24 Javascript
JavaScript插入排序算法原理与实现方法示例
Aug 06 Javascript
vuex2中使用mapGetters/mapActions报错的解决方法
Oct 20 Javascript
vue iview 隐藏Table组件里的某一列操作
Nov 13 Javascript
DatePickerDialog 自定义样式及使用全解
Jul 09 #Javascript
bootstrap 日期控件 datepicker被弹出框dialog覆盖的解决办法
Jul 09 #Javascript
bootstrap datepicker的基本使用教程
Jul 09 #Javascript
JavaScript常用内置对象用法分析
Jul 09 #Javascript
JavaScript遍历数组和对象的元素简单操作示例
Jul 09 #Javascript
JavaScript中BOM对象原理与用法分析
Jul 09 #Javascript
jquery多级树形下拉菜单的实例代码
Jul 09 #jQuery
You might like
thinkphp项目如何自定义微信分享描述内容
2017/02/20 PHP
IE8 chrome中table隔行换色解决办法
2010/07/09 Javascript
扩展jquery实现客户端表格的分页、排序功能代码
2011/03/16 Javascript
js点击出现悬浮窗效果不使用JQuery插件
2014/01/20 Javascript
js鼠标点击图片切换效果代码分享
2015/08/26 Javascript
JavaScript实现网页加载进度条代码超简单
2015/09/21 Javascript
jquery操作checkbox火狐下第二次无法勾选的解决方法
2016/10/10 Javascript
微信小程序组件 marquee实例详解
2017/06/23 Javascript
详解基于vue-cli优化的webpack配置
2017/11/06 Javascript
微信小程序基于本地缓存实现点赞功能的方法
2017/12/18 Javascript
vue-cli常用设置总结
2018/02/24 Javascript
vue采用EventBus实现跨组件通信及注意事项小结
2018/06/14 Javascript
MVVM 双向绑定的实现代码
2018/06/21 Javascript
JavaScript实现页面中录音功能的方法
2019/06/04 Javascript
vue 实现购物车总价计算
2019/11/06 Javascript
vue组件入门知识全梳理
2020/09/21 Javascript
jQuery实现可以计算进制转换的计算器
2020/10/19 jQuery
[36:05]完美世界DOTA2联赛循环赛 Forest vs DM 第一场 11.06
2020/11/06 DOTA
[08:56]DOTA2-DPC中国联赛2月23日Recap集锦
2021/03/11 DOTA
Python编写简单的HTML页面合并脚本
2016/07/11 Python
Python并发之多进程的方法实例代码
2018/08/15 Python
详解python3中用HTMLTestRunner.py报ImportError: No module named 'StringIO'如何解决
2019/08/27 Python
如何搭建pytorch环境的方法步骤
2020/05/06 Python
python实现密码验证合格程序的思路详解
2020/06/01 Python
Python环境管理virtualenv&amp;virtualenvwrapper的配置详解
2020/07/01 Python
HTML5 实现图片上传预处理功能
2020/02/06 HTML / CSS
SmartBuyGlasses意大利:购买太阳镜、眼镜和隐形眼镜
2018/11/20 全球购物
N:Philanthropy官网:美国洛杉矶基础款服装
2020/06/09 全球购物
本科生求职简历的自我评价
2013/10/21 职场文书
出生医学证明样本
2014/01/17 职场文书
入党自我鉴定
2014/03/25 职场文书
单位活动策划方案
2014/08/17 职场文书
我们的节日端午节活动总结
2015/02/11 职场文书
2015年招生工作总结
2015/05/04 职场文书
培训简讯范文
2015/07/20 职场文书
导游词之介休绵山
2019/12/31 职场文书