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获取textarea中的光标位置
May 06 Javascript
javascript EXCEL 操作类代码
Jul 30 Javascript
jquery multiSelect 多选下拉框
Jul 09 Javascript
jquery 提交值不为空的元素示例代码
May 10 Javascript
Jquery自定义button按钮的几种方法
Jun 11 Javascript
Jquery给当前页或者跳转后页面的导航栏添加选中后样式的实例
Dec 08 Javascript
jquery实现回车键触发事件(实例讲解)
Nov 21 jQuery
使用Vue-cli 3.0搭建Vue项目的方法
Jun 07 Javascript
webpack+vue-cil中proxyTable处理跨域的方法
Jul 20 Javascript
vue路由守卫+登录态管理实例分析
May 21 Javascript
ckeditor一键排版功能实现方法分析
Feb 06 Javascript
Vue 同步异步存值取值实现案例
Aug 05 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运算符的知识大全
2011/11/03 PHP
MySQL的FIND_IN_SET函数使用方法分享
2012/03/27 PHP
解析PHP中如何将数组变量写入文件
2013/06/06 PHP
解决PHP4.0 和 PHP5.0类构造函数的兼容问题
2013/08/01 PHP
在PHP模板引擎smarty生成随机数的方法和math函数详解
2014/04/24 PHP
使用composer命令加载vendor中的第三方类库 的方法
2019/07/09 PHP
javaScript 判断字符串是否为数字的简单方法
2009/07/25 Javascript
ff chrome和ie下全局动态定位的异同及全局高度的取法
2014/06/30 Javascript
js鼠标点击图片实现随机变换图片的方法
2015/02/16 Javascript
浅谈window对象的scrollBy()方法
2015/07/15 Javascript
javascript实现动态统计图开发实例
2015/11/21 Javascript
浅谈js的html元素的父节点,子节点
2016/08/06 Javascript
JSON 对象未定义错误的解决方法
2016/09/29 Javascript
JQuery Ajax WebService传递参数的简单实例
2016/11/02 Javascript
Vue学习笔记进阶篇之过渡状态详解
2017/07/14 Javascript
JS实现在文本指定位置插入内容的简单示例
2017/12/22 Javascript
JavaScript实现的贝塞尔曲线算法简单示例
2018/01/30 Javascript
[00:32]2018DOTA2亚洲邀请赛VG出场
2018/04/03 DOTA
Python实现拼接多张图片的方法
2014/12/01 Python
Python pickle模块用法实例分析
2015/05/27 Python
Python时间戳使用和相互转换详解
2017/12/11 Python
python并发2之使用asyncio处理并发
2017/12/21 Python
python3 读写文件换行符的方法
2018/04/09 Python
python利用插值法对折线进行平滑曲线处理
2018/12/25 Python
python监控进程状态,记录重启时间及进程号的实例
2019/07/15 Python
Django结合ajax进行页面实时更新的例子
2019/08/12 Python
Python使用enumerate获取迭代元素下标
2020/02/03 Python
python GUI库图形界面开发之PyQt5表格控件QTableView详细使用方法与实例
2020/03/01 Python
keras做CNN的训练误差loss的下降操作
2020/06/22 Python
利用Python如何画一颗心、小人发射爱心
2021/02/21 Python
俄罗斯领先的移动和数字设备在线商店:Svyaznoy.ru
2020/12/21 全球购物
保险公司早会主持词
2014/03/22 职场文书
请假条怎么写
2014/04/10 职场文书
领导个人查摆剖析材料
2014/10/29 职场文书
少儿励志名言(80句)
2019/08/14 职场文书
WIN10使用IIS部署ftp服务器详细教程
2022/08/05 Servers