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 相关文章推荐
日期函数扩展类Ver0.1.1
Sep 07 Javascript
extjs每个组件要设置唯一的ID否则会出错
Jun 15 Javascript
基于jQuery实现的美观星级评论打分组件代码
Oct 30 Javascript
JavaScript中用let语句声明作用域的用法讲解
May 20 Javascript
JS模拟bootstrap下拉菜单效果实例
Jun 17 Javascript
jQuery中ScrollTo用法示例
Sep 04 Javascript
JS定时检测任务任务完成后执行下一步的解决办法
Dec 22 Javascript
Jil,高效的json序列化和反序列化库
Feb 15 Javascript
详解如何在Vue2中实现组件props双向绑定
Mar 29 Javascript
echarts.js 动态生成多个图表 使用vue封装组件操作
Jul 19 Javascript
从0到1学习JavaScript编写贪吃蛇游戏
Jul 28 Javascript
Vue 使用iframe引用html页面实现vue和html页面方法的调用操作
Nov 16 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编程中字符串处理的5个技巧小结
2007/11/13 PHP
附件名前加网站名
2008/03/23 PHP
如何利用PHP执行.SQL文件
2013/07/05 PHP
百度地图API使用方法详解
2015/08/25 PHP
php验证邮箱和ip地址最简单方法汇总
2015/10/30 PHP
Yii框架批量插入数据扩展类的简单实现方法
2017/05/23 PHP
PHP array_reverse() 函数原理及实例解析
2020/07/14 PHP
javascript 对象的定义方法
2007/01/10 Javascript
CCPry JS类库 代码
2009/10/30 Javascript
40个有创意的jQuery图片和内容滑动及弹出插件收藏集之二
2011/12/31 Javascript
node.js应用后台守护进程管理器Forever安装和使用实例
2014/06/01 Javascript
JS来动态的修改url实现对url的增删查改
2014/09/05 Javascript
分享20款美化网站的 jQuery Lightbox 灯箱插件
2014/10/10 Javascript
javascript制作坦克大战全纪录(1)
2014/11/27 Javascript
jQuery分组选择器用法实例
2014/12/23 Javascript
Javascript中获取对象的原型对象的方法小结
2015/02/25 Javascript
js实现固定显示区域内自动缩放图片的方法
2015/07/18 Javascript
jQuery Ajax使用FormData上传文件和其他数据后端web.py获取
2017/06/11 jQuery
vue异步axios获取的数据渲染到页面的方法
2018/08/09 Javascript
深入理解移动前端开发之viewport
2018/10/19 Javascript
layui动态渲染生成select的option值方法
2019/09/23 Javascript
vue.js+ElementUI实现进度条提示密码强度效果
2020/01/18 Javascript
Webpack3+React16代码分割的实现
2021/03/03 Javascript
Python实现的一个找零钱的小程序代码分享
2014/08/25 Python
Python实现类似jQuery使用中的链式调用的示例
2016/06/16 Python
Python3 读、写Excel文件的操作方法
2018/10/20 Python
Django如何开发简单的查询接口详解
2019/05/17 Python
Python 时间戳之获取整点凌晨时间戳的操作方法
2020/01/28 Python
Python执行时间的几种计算方法
2020/07/31 Python
使用CSS3的box-sizing属性解决div宽高被内边距撑开的问题
2016/06/28 HTML / CSS
英国豪华真皮和布艺沙发销售网站:Darlings of Chelsea
2018/01/05 全球购物
2014年协会工作总结
2014/11/22 职场文书
考试作弊检讨书
2015/01/27 职场文书
建党伟业电影观后感
2015/06/01 职场文书
OpenCV-Python实现人脸磨皮算法
2021/06/07 Python
mysql拆分字符串作为查询条件的示例代码
2022/07/07 MySQL