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 相关文章推荐
基于jquery的仿百度的鼠标移入图片抖动效果
Sep 17 Javascript
JavaScript的函数式编程基础指南
Mar 19 Javascript
判断是否存在子节点的实现代码
May 18 Javascript
浅谈js的html元素的父节点,子节点
Aug 06 Javascript
提高Web性能的前端优化技巧总结
Feb 27 Javascript
老生常谈Bootstrap媒体对象
Jul 06 Javascript
简单实现jQuery手风琴效果
Aug 18 jQuery
Vue 多层组件嵌套二种实现方式(测试实例)
Sep 08 Javascript
为nuxt项目写一个面包屑cli工具实现自动生成页面与面包屑配置
Sep 29 Javascript
jquery实现简易验证插件封装
Sep 13 jQuery
vue3中的组件间通信
Mar 31 Vue.js
JavaScript实现外溢动态爱心的效果的示例代码
Mar 21 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中用正则表达式清除字符串的空白
2011/01/17 PHP
php中生成随机密码的自定义函数代码
2013/10/21 PHP
ThinkPHP独立分组使用的注意事项
2014/11/25 PHP
PHP时间处理类操作示例
2018/09/05 PHP
php+jQuery ajax实现的实时刷新显示数据功能示例
2019/09/12 PHP
php设计模式之备忘模式分析【星际争霸游戏案例】
2020/03/24 PHP
javascript中的一些注意事项 更新中
2010/12/06 Javascript
基于jQuery的可用于选项卡及幻灯的切换插件
2011/03/28 Javascript
jquery formValidator插件ajax验证 内容不做任何修改再离开提示错误的bug解决方法
2013/01/04 Javascript
getComputedStyle与currentStyle获取样式(style/class)
2013/03/19 Javascript
使用JQuery库提供的扩展功能实现自定义方法
2014/09/09 Javascript
jQuery统计指定子元素数量的方法
2015/03/17 Javascript
jQuery寻找n以内完全数的方法
2015/06/24 Javascript
jQuery实现鼠标划过添加和删除class的方法
2015/06/26 Javascript
AngularJS使用ng-app自动加载bootstrap框架问题分析
2017/01/04 Javascript
vue实现添加标签demo示例代码
2017/01/21 Javascript
vue实现2048小游戏功能思路详解
2018/05/09 Javascript
监控Nodejs的性能实例代码
2019/07/02 NodeJs
jQuery实现图片下载代码
2019/07/18 jQuery
koa2 用户注册、登录校验与加盐加密的实现方法
2019/07/22 Javascript
JavaScript代码异常监控实现过程详解
2020/02/17 Javascript
使用vue打包进行云服务器上传的问题
2020/03/02 Javascript
使用Python的Supervisor进行进程监控以及自动启动
2014/05/29 Python
python实现读取命令行参数的方法
2015/05/22 Python
Python中for循环控制语句用法实例
2015/06/02 Python
一行python实现树形结构的方法
2019/08/09 Python
详解python命令提示符窗口下如何运行python脚本
2020/09/11 Python
使用JS+CSS3技术:让你的名字动起来
2013/04/27 HTML / CSS
会计师事务所审计实习自我鉴定
2013/09/20 职场文书
求职信的最佳写作思路
2014/02/01 职场文书
社区活动策划方案
2014/08/21 职场文书
师德师风学习材料
2014/12/19 职场文书
遗愿清单观后感
2015/06/09 职场文书
关于法制教育的宣传语
2015/07/13 职场文书
大学生暑假实习总结
2015/07/13 职场文书
浅谈Python中的正则表达式
2021/06/28 Python