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传值 判断
Oct 26 Javascript
使用Microsoft Ajax Minifier减小JavaScript文件大小的方法
Apr 01 Javascript
javascript中的变量作用域以及变量提升详细介绍
Oct 24 Javascript
js 鼠标移动显示图片的简单实例
Dec 25 Javascript
JS 实现倒计时数字时钟效果【附实例代码】
Mar 30 Javascript
AngularJS中实现动画效果的方法
Jul 28 Javascript
原生js实现查询天气小应用
Dec 09 Javascript
Linux系统中利用node.js提取Word(doc/docx)及PDF文本的内容
Jun 17 Javascript
Vue之Watcher源码解析(2)
Jul 19 Javascript
JavaScript中立即执行函数实例详解
Nov 04 Javascript
基于node下的http小爬虫的示例代码
Jan 11 Javascript
swiper 解决动态加载数据滑动失效的问题
Feb 26 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 静态化实现代码
2009/03/20 PHP
PHP投票系统防刷票判断流程分析
2012/02/04 PHP
Thinkphp中数据按分类嵌套循环实现方法
2014/10/30 PHP
微信接口生成带参数的二维码
2017/07/31 PHP
使用 laravel sms 构建短信验证码发送校验功能
2017/11/06 PHP
php获取微信共享收货地址的方法
2017/12/21 PHP
一些常用的JS功能函数(2009-06-04更新)
2009/06/04 Javascript
如何解决Jquery库及其他库之间的$命名冲突
2013/09/15 Javascript
JavaScript省市联动实现代码
2014/02/15 Javascript
js获取当前页面的url网址信息
2014/06/12 Javascript
自定义百度分享的分享按钮
2015/03/18 Javascript
jquery mobile移动端幻灯片滑动切换效果
2020/04/15 Javascript
vue源码学习之Object.defineProperty 对数组监听
2018/05/30 Javascript
浅谈关于JS下大批量异步任务按顺序执行解决方案一点思考
2019/01/08 Javascript
JS实现的全选、全不选及反选功能【案例】
2019/02/19 Javascript
一次让你了解全部JavaScript的作用域
2019/06/24 Javascript
nodejs处理tcp连接的核心流程
2021/02/26 NodeJs
[08:47]DOTA2每周TOP10 精彩击杀集锦vol.6
2014/06/25 DOTA
Python快速查找list中相同部分的方法
2018/06/27 Python
python实现求特征选择的信息增益
2018/12/18 Python
pytorch 获取层权重,对特定层注入hook, 提取中间层输出的方法
2019/08/17 Python
手机使用python操作图片文件(pydroid3)过程详解
2019/09/25 Python
Python英文文章词频统计(14份剑桥真题词频统计)
2019/10/13 Python
详解Django CAS 解决方案
2019/10/30 Python
Python 使用office365邮箱的示例
2020/10/29 Python
美国面料纺织品商城:Fabric.com
2017/06/28 全球购物
英国现代家具和装饰网站:PN Home
2018/08/16 全球购物
2014年小学教导处工作总结
2014/12/19 职场文书
检讨书范文300字
2015/01/28 职场文书
小学班主任个人总结
2015/03/03 职场文书
奖励通知
2015/04/22 职场文书
2015年新农村建设指导员工作总结
2015/07/24 职场文书
环保建议书作文300字
2015/09/14 职场文书
SpringBoot读取Resource下文件的4种方法
2021/07/02 Java/Android
Go语言空白表示符_的实例用法
2021/07/04 Golang
使用Docker容器部署rocketmq单机的全过程
2022/04/03 Servers