JS实现无限轮播无倒退效果


Posted in Javascript onSeptember 21, 2020

本文实例为大家分享了JS实现无限轮播无倒退的具体代码,供大家参考,具体内容如下

原理:每次移动前设置transition过渡效果,完成清除过渡效果,然后在到达最后一张图片的时候在清除过渡效果之后translateX(0)

另外需要jq的引用

HTML:

<div class="slide-container" view-count="3">
 <ul>
 <li>
  <img src="images/women/15444293310974910.jpg" alt=""/>
 </li>
 <li>
  <img src="images/women/15444293312083674.jpg" alt=""/>
 </li>
 <li>
  <img src="images/women/15444293313734437.jpg" alt=""/>
 </li>
 <li>
  <img src="images/women/15444293315979953.jpg" alt=""/>
 </li>
 <li>
  <img src="images/women/15444293316955485.jpg" alt=""/>
 </li>
 <li>
  <img src="images/women/15444293317767707.jpg" alt=""/>
 </li>
 </ul>
</div>

CSS:

.slide-container {
  max-width: 1230px;
  margin: auto;
  overflow: hidden;
 }
 .slide-container li {
  float: left;
 }
 .slide-container img {
  width: 100%;
 }

JS:

第一步我们应该在ul的所有li前面和后面复制一份一摸一样的li数组。

效果图:

JS实现无限轮播无倒退效果

JS实现无限轮播无倒退效果

在原来的li集合前后添加了一个一模一样的集合之后,slide-container显示的是prepend(li集合)。

为了使slide-container显示的是最中间的li集合,设置ul:margin-left 和margin-right为负值。大小为一个li集合的宽度。

这样ul实际的宽度就是原来的三倍。slide-container显示的就是最原始的li集合。

let orgLen, canMove, curLi, curLen,
  slider = null,
  interval = null,
  curImgIndex = 0;
 
 function initSlider() {
  let orgLiArray = document.querySelectorAll('.slide-container li');
 
  orgLen = orgLiArray.length;
  canMove = true;
  slider = $('.slide-container');
 
  addLi();
  setStyle();
 
  //添加li
  function addLi() {
  for (let i = 0; i < orgLen; i++) {
   let preLi = orgLiArray[orgLen - i - 1].cloneNode(true);
   let apLi = orgLiArray[i].cloneNode(true);
   document.querySelector('.slide-container ul').prepend(preLi);
   document.querySelector('.slide-container ul').append(apLi);
  }
  }
 
  function setStyle() {
  curLi = slider.find('li');
  curLen = curLi.length;
 
  curLi.css({
   'width': 'calc(' + 100 / curLen + '% - 10px)', //动态设置li的宽度
   'margin': '0 5px'
  });
 
  //根据实际li个数与ul中用户能够看到的个数比例设置ul宽度
  slider.find('ul').css({
   'width': curLen / slider.attr('view-count') * 100 + '%', 
  });
 
  //获取到设置了width之后的li宽度
  //通过margin-left 与margin-right 为负数 使中间的原始li集合在slide-container显示
  let width = document.defaultView.getComputedStyle(curLi[0]).width.match(/\d*\W\d/g);
 
  width = (parseFloat(width) + 10) * orgLen;
  slider.find('ul').css({
   'margin-left': '-' + width + 'px',
   'margin-right': '-' + width + 'px',
  });
  }
 } 
 
 /**
  * 移动函数
  * 每次移动后移除过渡效果
  * 当前第一个图片索引值的绝对值大于原始图片数量则恢复为原始状态
  * @param imgIndex
  */
 function move(imgIndex) {
  canMove = false; //滚轮滚动中不能再次滚动
  clearInterval(interval); //清除定时器
  slider.find('ul').css({
  'transition': 'all 0.5s linear'
  });
 
  setTimeout(function () { //移动
  slider.find('ul').css({
   'transform': 'translateX( ' + 100 / curLen * -imgIndex + '% )',
  });
  setTimeout(function () { //移动完成后清除过渡效果
   slider.find('ul').css({
   'transition': '',
   });
   setTimeout(function () {
   if (Math.abs(imgIndex) >= orgLen) { //到达边界回到初始状态
    curImgIndex = 0;
    slider.find('ul').css({
    'transform': 'translateX(0)'
    });
   }
   canMove = true;
   startInterval();
   }, 20);
  }, 500);
  }, 20);
 }
 
 function startInterval() {
  interval = setInterval(function () { //开始轮播
  curImgIndex++;
  move(curImgIndex);
  },2000);
 }
 
 initSlider();
 startInterval();

然后加入鼠标滚轮实现效果,可以用滚轮切换图片。

先编写具体的处理函数。

//统一处理滚轮滚动事件
 function wheel(event) {
  var delta = 0;
  if (!event) event = window.event;
  if (event.wheelDelta) { //IE、chrome浏览器使用的是wheelDelta,并且值为“正负120”
  delta = event.wheelDelta / 120;
  if (window.opera)
 
  //因为IE、chrome等向下滚动是负值,FF是正值,为了处理一致性,在此取反处理
   delta = -delta;
  } else if (event.detail) { //FF浏览器使用的是detail,其值为“正负3”
  delta = -event.detail / 3;
  }
  if (delta) {
  handle(delta);
 
  //阻止事件冒泡和屏幕向下滚动
  event.preventDefault() && event.stopPropagation();
  }
 
 }
 
 //上下滚动时的具体处理函数
 function handle(delta) {
  //向上滚动
  if (delta < 0 && canMove) {
  curImgIndex++;
  move(curImgIndex);
  } else if (delta > 0 && canMove) { //向下滚动
  curImgIndex--;
  move(curImgIndex);
  }
 }

然后绑定滚轮滚动事件

//兼容性写法
if (window.addEventListener) //FF,火狐浏览器会识别该方法
 slider.get(0).addEventListener('DOMMouseScroll', wheel, false);
 slider.get(0).onmousewheel = wheel; //W3C

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery live
May 15 Javascript
ExtJs GridPanel简单的增删改实现代码
Aug 26 Javascript
ASP.NET jQuery 实例6 (实现CheckBoxList成员全选或全取消)
Jan 13 Javascript
JQuery UI的拖拽功能实现方法小结
Mar 14 Javascript
node.js+Ajax实现获取HTTP服务器返回数据
Nov 26 Javascript
jQuery简单实现禁用右键菜单
Mar 10 Javascript
javascript实现textarea中tab键的缩排处理方法
Jun 26 Javascript
JavaScript获取表格(table)当前行的值、删除行、增加行
Jul 03 Javascript
原生js实现百叶窗效果及原理介绍
Apr 12 Javascript
jQuery 如何给Carousel插件添加新的功能
Apr 18 Javascript
ES6 Symbol在对象中的作用实例分析
Jun 06 Javascript
关于ES6尾调用优化的使用
Sep 11 Javascript
js+canvas绘制图形验证码
Sep 21 #Javascript
vue中路由跳转不计入history的操作
Sep 21 #Javascript
JS实现放大镜效果
Sep 21 #Javascript
vue element ui validate 主动触发错误提示操作
Sep 21 #Javascript
Vue Element校验validate的实例
Sep 21 #Javascript
在vue中实现某一些路由页面隐藏导航栏的功能操作
Sep 21 #Javascript
vue3.0 上手体验
Sep 21 #Javascript
You might like
索尼SONY ICF-SW7600GR电路分析与改良
2021/03/02 无线电
社区(php&amp;&amp;mysql)四
2006/10/09 PHP
PHP中设置时区,记录日志文件的实现代码
2013/01/07 PHP
PHP读取CURL模拟登录时生成Cookie文件的方法
2014/11/04 PHP
PHP编程中尝试程序并发的几种方式总结
2016/03/21 PHP
PHP判断是手机端还是PC端 PHP判断是否是微信浏览器
2017/03/15 PHP
JavaScript窗口功能指南之在窗口中书写内容
2006/07/21 Javascript
jQuery Mobile页面跳转后未加载外部JS原因分析及解决
2013/03/18 Javascript
利用js 进行输入框自动匹配字符的小例子
2013/06/29 Javascript
node.js中的require使用详解
2014/12/15 Javascript
JavaScript常用基础知识强化学习
2015/12/09 Javascript
jQuery改变form表单的action,并进行提交的实现代码
2016/05/25 Javascript
原生js实现jquery函数animate()动画效果的简单实例
2016/08/21 Javascript
详解vue使用vue-layer-mobile组件实现toast,loading效果
2018/08/31 Javascript
angular4中*ngFor不能对返回来的对象进行循环的解决方法
2018/09/12 Javascript
vue组件之间通信实例总结(点赞功能)
2018/12/05 Javascript
浅谈JS中this在各个场景下的指向
2019/08/14 Javascript
解决Vue项目打包后打开index.html页面显示空白以及图片路径错误的问题
2019/10/25 Javascript
vue@cli3项目模板怎么使用public目录下的静态文件
2020/07/07 Javascript
基于vue-simple-uploader封装文件分片上传、秒传及断点续传的全局上传插件功能
2021/02/23 Vue.js
[42:11]TNC vs Pain 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
Python模拟用户登录验证
2017/09/11 Python
Python中max函数用于二维列表的实例
2018/04/03 Python
Python高级用法总结
2018/05/26 Python
python matplotlib如何给图中的点加标签
2019/11/14 Python
Python assert关键字原理及实例解析
2019/12/13 Python
Python跑循环时内存泄露的解决方法
2020/01/13 Python
应届生个人求职信模板
2013/11/26 职场文书
校园报刊亭的创业计划书
2014/01/02 职场文书
英文请假条
2014/04/11 职场文书
十佳党员事迹材料
2014/08/28 职场文书
中国在我心中演讲稿
2014/09/13 职场文书
八年级英语教学计划
2015/01/23 职场文书
世界遗产的导游词
2015/02/13 职场文书
酒店辞职信怎么写
2015/02/27 职场文书
幼儿园食品安全责任书
2015/05/08 职场文书