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显示随机图像或引用
Apr 21 Javascript
JS 参数传递的实际应用代码分析
Sep 13 Javascript
javascript tips提示框组件实现代码
Nov 19 Javascript
21个值得收藏的Javascript技巧
Feb 04 Javascript
Jquery通过JSON字符串创建JSON对象
Aug 24 Javascript
Node.js异步I/O学习笔记
Nov 04 Javascript
jquery操作select方法汇总
Feb 05 Javascript
javascript 分号总结及详细介绍
Sep 24 Javascript
jQuery和CSS仿京东仿淘宝列表导航菜单
Jan 04 Javascript
Vue中v-for的数据分组实例
Mar 07 Javascript
JS复杂判断的更优雅写法代码详解
Nov 07 Javascript
一篇超完整的Vue新手入门指导教程
Nov 18 Vue.js
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
咖啡豆分级制度 咖啡豆等级分类 咖啡豆是按口感分类的吗?
2021/03/05 新手入门
一些常用的php函数
2006/12/06 PHP
PHP中mb_convert_encoding与iconv函数的深入解析
2013/06/21 PHP
PHP实现的多彩标签效果代码分享
2014/08/21 PHP
分享一则PHP定义函数代码
2015/02/26 PHP
php多线程实现方法及用法实例详解
2015/10/26 PHP
PHP Oauth授权和本地加密实现方法
2016/08/12 PHP
Docker搭建自己的PHP开发环境
2018/02/24 PHP
php引用和拷贝的区别知识点总结
2019/09/23 PHP
把JS与CSS写在同一个文件里的书写方法
2007/06/02 Javascript
syntaxhighlighter 使用方法
2007/07/02 Javascript
根据地区不同显示时间的javascript代码
2007/08/13 Javascript
Blocksit插件实现瀑布流数据无限( 异步)加载
2014/06/20 Javascript
javascript伸缩菜单栏实现代码分享
2015/11/12 Javascript
headjs实现网站并行加载但顺序执行JS
2016/11/29 Javascript
Angular的自定义指令以及实例
2016/12/26 Javascript
PHP实现记录代码运行时间封装类实例教程
2017/05/08 Javascript
前端构建工具之gulp的语法教程
2017/06/12 Javascript
微信小程序之多列表的显示和隐藏功能【附源码】
2018/08/06 Javascript
vue 自定义提示框(Toast)组件的实现代码
2018/08/17 Javascript
echarts实现词云自定义形状的示例代码
2019/02/20 Javascript
VUE注册全局组件和局部组件过程解析
2019/10/10 Javascript
python实现kNN算法识别手写体数字的示例代码
2019/08/16 Python
Python shutil模块用法实例分析
2019/10/02 Python
Django restframework 框架认证、权限、限流用法示例
2019/12/21 Python
python中wheel的用法整理
2020/06/15 Python
使用Python制作一盏 3D 花灯喜迎元宵佳节
2021/02/26 Python
九年级体育教学反思
2014/01/23 职场文书
30年同学聚会邀请函
2014/01/25 职场文书
计算机网络专业自荐书
2014/06/09 职场文书
2014基建处领导班子“四风”对照检查材料思想汇报
2014/10/04 职场文书
周恩来的四个昼夜观后感
2015/06/03 职场文书
2016年学习雷锋精神广播稿
2015/12/17 职场文书
试了下Golang实现try catch的方法
2021/07/01 Golang
详解JSON.parse和JSON.stringify用法
2022/02/18 Javascript
nginx.conf配置文件结构小结
2022/04/08 Servers