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代码
May 27 Javascript
JavaScript 继承详解(一)
Jul 13 Javascript
30个最好的jQuery 灯箱插件分享
Apr 25 Javascript
javascript阻止浏览器后退事件防止误操作清空表单
Nov 22 Javascript
用box固定长宽实现图片自动轮播js代码
Jun 09 Javascript
使用时间戳解决ie缓存的问题
Aug 20 Javascript
JS使用eval解析JSON的注意事项分析
Nov 14 Javascript
浅谈Angularjs link和compile的使用区别
Oct 21 Javascript
静态页面实现 include 引入公用代码的示例
Sep 25 Javascript
原生js封装添加class,删除class的实例
Nov 06 Javascript
Vue进度条progressbar组件功能
Apr 17 Javascript
实现vuex与组件data之间的数据同步更新方式
Nov 12 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
php连接微软MSSQL(sql server)完全攻略
2016/11/27 PHP
Laravel如何实现自动加载类
2019/10/14 PHP
NiftyCube——轻松实现圆角边框
2007/02/20 Javascript
JS 用6N±1法求素数 实例教程
2009/10/20 Javascript
js constructor的实际作用分析
2011/11/15 Javascript
jsonp原理及使用
2013/10/28 Javascript
Javascript浮点数乘积运算出现多位小数的解决方法
2014/02/17 Javascript
深入学习jQuery Validate表单验证
2016/01/18 Javascript
jquery购物车结算功能实现方法
2020/10/29 Javascript
微信小程序 下拉列表的实现实例代码
2017/03/08 Javascript
解决Extjs下拉框不显示的问题
2017/06/21 Javascript
浅谈JavaScript中的属性:如何遍历属性
2017/09/14 Javascript
Ajax请求时无法重定向的问题解决代码详解
2019/06/21 Javascript
vue中全局路由守卫中替代this操作(this.$store/this.$vux)
2020/07/24 Javascript
python matplotlib坐标轴设置的方法
2017/12/05 Python
python编程使用selenium模拟登陆淘宝实例代码
2018/01/25 Python
Python下载网络小说实例代码
2018/02/03 Python
如何实现删除numpy.array中的行或列
2018/05/08 Python
python 获取当天凌晨零点的时间戳方法
2018/05/22 Python
Python常用的json标准库
2019/02/19 Python
python项目对接钉钉SDK的实现
2019/07/15 Python
将python依赖包打包成window下可执行文件bat方式
2019/12/26 Python
python实现QQ邮箱发送邮件
2020/03/06 Python
使用python处理题库表格并转化为word形式的实现
2020/04/14 Python
如何使用html5与css3完成google涂鸦动画
2012/12/16 HTML / CSS
欧洲最大的拼图游戏商店:JigsawPuzzle.co.uk
2018/07/04 全球购物
领导失职检讨书
2014/02/24 职场文书
2014教师党员自我评议(5篇)
2014/09/20 职场文书
2015年入党积极分子评语
2015/03/26 职场文书
2015年医院创卫工作总结
2015/04/22 职场文书
小学信息技术教学反思
2016/02/16 职场文书
先进个人事迹材料(2016推荐版)
2016/03/01 职场文书
Memcached介绍及php-memcache扩展安装
2021/04/01 PHP
利用python实时刷新基金估值(摸鱼小工具)
2021/09/15 Python
MySQL分区表管理命令汇总
2022/03/21 MySQL
JS前端可扩展的低代码UI框架Sunmao使用详解
2022/07/23 Javascript