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 相关文章推荐
让 JavaScript 轻松支持函数重载 (Part 2 - 实现)
Aug 04 Javascript
javascript 混合的构造函数和原型方式,动态原型方式
Dec 07 Javascript
JavaScript中的变量声明早于赋值分析
Mar 01 Javascript
编写针对IE的JS代码两种编写方法
Jan 30 Javascript
js中一个函数获取另一个函数返回值问题探讨
Nov 21 Javascript
基于jQuery创建鼠标悬停效果的方法
Mar 07 Javascript
JS实现兼容各浏览器解析XML文档数据的方法
Jun 01 Javascript
JS实现的最简Table选项卡效果
Oct 14 Javascript
JavaScript简单下拉菜单特效
Sep 13 Javascript
js实现文字向上轮播功能
Jan 13 Javascript
node.js支持多用户web终端实现及安全方案
Nov 29 Javascript
深入浅出vue图片路径的实现
Sep 04 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文件怎么打开 如何执行php文件
2011/12/21 PHP
PHP SPL标准库之文件操作(SplFileInfo和SplFileObject)实例
2015/05/11 PHP
PHP+AJAX 投票器功能
2017/11/11 PHP
PHP array_reverse() 函数原理及实例解析
2020/07/14 PHP
拖动布局之保存布局页面cookies篇
2010/10/29 Javascript
jQuery读取和设定KindEditor值的方法
2013/11/22 Javascript
如何实现textarea里的不同文本显示不同颜色
2014/01/20 Javascript
ajax提交表单实现网页无刷新注册示例
2014/05/08 Javascript
Javascript中的几种URL编码方法比较
2015/01/23 Javascript
jQuery EasyUI datagrid实现本地分页的方法
2015/02/13 Javascript
JavaScript学习笔记整理_关于表达式和语句
2016/09/19 Javascript
Javascript实现数组中的元素上下移动
2017/04/28 Javascript
前端主流框架vue学习笔记第一篇
2017/07/26 Javascript
javascript 中select框触发事件过程的分析
2017/08/01 Javascript
微信小程序滚动Tab实现左右可滑动切换
2017/08/17 Javascript
使用Vuex实现一个笔记应用的方法
2018/03/13 Javascript
vue中template的三种写法示例
2020/10/21 Javascript
[02:34]肉山说——泡妞篇
2014/09/16 DOTA
跟老齐学Python之画圈还不简单吗?
2014/09/20 Python
Python操作MongoDB详解及实例
2017/05/18 Python
python实现QQ邮箱/163邮箱的邮件发送
2019/01/22 Python
对Python3 goto 语句的使用方法详解
2019/02/16 Python
python 基于TCP协议的套接字编程详解
2019/06/29 Python
Python+pyplot绘制带文本标注的柱状图方法
2019/07/08 Python
Django contrib auth authenticate函数源码解析
2020/11/12 Python
英国著名的茶叶品牌:Whittard of Chelsea
2016/09/22 全球购物
荷兰皇家航空公司官方网站:KLM Royal Dutch Airlines
2017/12/07 全球购物
CK巴西官方网站:Calvin Klein巴西
2019/07/19 全球购物
英国婴儿产品专家:Samuel Johnston
2020/04/20 全球购物
什么是反射
2012/03/17 面试题
大学生实习期自我评价范文
2013/10/03 职场文书
信用社员工先进事迹材料
2014/02/04 职场文书
财务管理专业求职信
2014/06/11 职场文书
个人简历自我评价怎么写
2015/03/10 职场文书
惹女朋友生气检讨书
2015/05/06 职场文书
《圆明园的毁灭》教学反思
2016/02/16 职场文书