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的键盘事件修改代码
Feb 24 Javascript
JavaScript中“基本类型”之争小结
Jan 03 Javascript
浅谈javascript中自定义模版
Jan 29 Javascript
基于JavaScript创建动态Dom
Dec 08 Javascript
基于HTML模板和JSON数据的JavaScript交互(移动端)
Apr 06 Javascript
JS图片等比例缩放方法完整示例
Aug 03 Javascript
jQuey将序列化对象在前台显示地实现代码(方法总结)
Dec 13 Javascript
JS一个简单的注册页面实例
Sep 05 Javascript
深入浅析var,let,const的异同点
Aug 07 Javascript
使用Vue生成动态表单
Nov 26 Javascript
基于JavaScript实现大文件上传后端代码实例
Aug 18 Javascript
JavaScript实现移动端拖动元素
Nov 24 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数据库开发知多少
2006/10/09 PHP
php 上一篇,下一篇文章实现代码与原理说明
2010/05/09 PHP
关于PHP模板Smarty的初级使用方法以及心得分享
2013/06/21 PHP
PHP安全上传图片的方法
2015/03/21 PHP
php实现在限定区域里自动调整字体大小的类实例
2015/04/02 PHP
PHP生成plist数据的方法
2015/06/16 PHP
php实现的递归提成方案实例
2015/11/14 PHP
PHP控制前台弹出对话框的实现方法
2016/08/21 PHP
PHP实现字符串的全排列详解
2019/04/24 PHP
在jQuery 1.5中使用deferred对象的代码(翻译)
2011/03/10 Javascript
JS+ACTIVEX实现网页选择本地目录路径对话框
2013/03/18 Javascript
Javascript基础教程之数据类型 (字符串 String)
2015/01/18 Javascript
JavaScript实现的简单拖拽效果
2015/06/01 Javascript
JavaScript数值千分位格式化的两种简单实现方法
2016/08/01 Javascript
Javascript中常见的逻辑题和解决方法
2016/09/17 Javascript
js实时获取窗口大小变化的实例代码
2016/11/18 Javascript
AngularJS入门教程之路由机制ngRoute实例分析
2016/12/13 Javascript
搭建简单的nodejs http服务器详解
2017/03/09 NodeJs
微信小程序实现图片上传放大预览删除代码
2020/06/28 Javascript
[01:04:01]2014 DOTA2华西杯精英邀请赛5 24 DK VS VG
2014/05/25 DOTA
python常用库之NumPy和sklearn入门
2019/07/11 Python
基于Python实现签到脚本过程解析
2019/10/25 Python
python flask搭建web应用教程
2019/11/19 Python
Django生成PDF文档显示网页上以及PDF中文显示乱码的解决方法
2019/12/17 Python
Python ellipsis 的用法详解
2020/11/20 Python
TripAdvisor西班牙官方网站:全球领先的旅游网站
2018/01/10 全球购物
方正Java笔试题
2014/07/03 面试题
J2ee常用的设计模式?说明工厂模式
2015/05/21 面试题
同事吵架检讨书
2014/02/05 职场文书
班级文化标语
2014/06/23 职场文书
关于读书的演讲稿300字
2014/08/27 职场文书
女方离婚起诉书
2015/05/18 职场文书
自荐信大全
2019/03/21 职场文书
nginx常用命令放入shell脚本详解
2021/03/31 Servers
分享几个简单MySQL优化小妙招
2022/03/31 MySQL
Mysql使用全文索引(FullText index)的实例代码
2022/04/03 MySQL