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 相关文章推荐
javascript修改表格背景色实例代码分享
Dec 10 Javascript
jQuery中animate()方法用法实例
Dec 24 Javascript
超详细的javascript数组方法汇总
Nov 21 Javascript
Node.js制作简单聊天室
Jan 12 Javascript
Bootstrap按钮组简单实现代码
Mar 06 Javascript
jQuery Collapse1.1.0折叠插件简单使用
Aug 28 jQuery
seajs中最常用的7个功能、配置示例
Oct 10 Javascript
vue使用mint-ui实现下拉刷新和无限滚动的示例代码
Nov 06 Javascript
解决webpack无法通过IP地址访问localhost的问题
Feb 22 Javascript
vue-cli axios请求方式及跨域处理问题
Mar 28 Javascript
JavaScript中filter的用法实例分析
Feb 27 Javascript
NProgress显示顶部进度条效果及使用详解
Sep 21 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
PHP遍历数组的几种方法
2012/03/22 PHP
PHP的MVC模式实现原理分析(一相简单的MVC框架范例)
2014/04/29 PHP
smarty自定义函数htmlcheckboxes用法实例
2015/01/22 PHP
PHP实现过滤各种HTML标签
2015/05/17 PHP
php检查函数必传参数是否存在的实例详解
2017/08/28 PHP
解决windows上php xdebug 无法调试的问题
2020/02/19 PHP
Javascript this指针
2009/07/30 Javascript
jquery 入门教程 [翻译] 推荐
2009/08/17 Javascript
正则表达式搭配js轻松处理json文本方便而老古
2013/02/17 Javascript
JS中typeof与instanceof之间的区别总结
2013/11/14 Javascript
在JavaScript中操作时间之getUTCDate()方法的使用
2015/06/10 Javascript
手机端实现Bootstrap简单图片轮播效果
2016/10/13 Javascript
ajax +NodeJS 实现图片上传实例
2017/06/06 NodeJs
jQuery中过滤器的基本用法示例
2017/10/11 jQuery
NodeJS加密解密及node-rsa加密解密用法详解
2018/10/12 NodeJs
layui实现下拉框三级联动
2019/07/26 Javascript
jQuery擦除插件eraser使用方法详解
2020/01/11 jQuery
详解elementUI中input框无法输入的问题
2020/04/27 Javascript
Vue时间轴 vue-light-timeline的用法说明
2020/10/29 Javascript
微信小程序实现可长按移动控件
2020/11/01 Javascript
[01:00:35]2018DOTA2亚洲邀请赛3月30日B组 EffcetVSMineski
2018/03/31 DOTA
[48:26]VGJ.S vs infamous Supermajor 败者组 BO3 第二场 6.4
2018/06/05 DOTA
python删除过期文件的方法
2015/05/29 Python
python3.0 模拟用户登录,三次错误锁定的实例
2017/11/02 Python
Python回文字符串及回文数字判定功能示例
2018/03/20 Python
详解pyqt5 动画在QThread线程中无法运行问题
2018/05/05 Python
Python 格式化输出_String Formatting_控制小数点位数的实例详解
2020/02/04 Python
树莓派升级python的具体步骤
2020/07/05 Python
利用CSS3实现毛玻璃效果示例源码
2016/09/25 HTML / CSS
阿迪达斯荷兰官方网站:adidas荷兰
2018/03/16 全球购物
JD Sports芬兰:英国领先的运动鞋和运动服饰零售商
2018/11/16 全球购物
幼儿园实习自我鉴定
2013/12/15 职场文书
科研课题实施方案
2014/03/18 职场文书
小学运动会班级口号
2014/06/09 职场文书
运动会广播稿200字
2014/10/18 职场文书
2015学生会文艺部工作总结
2015/04/03 职场文书