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 EasyUI 开源插件套装 完全替代ExtJS
Mar 24 Javascript
基于jquery的滚动新闻列表
Jun 19 Javascript
JavaScript Sort 的一个错误用法示例
Mar 20 Javascript
js调出上下文菜单的实例
Dec 17 Javascript
vue.js表格组件开发的实例详解
Oct 12 Javascript
JS重载实现方法分析
Dec 16 Javascript
JavaScript实现前端分页控件
Apr 19 Javascript
vue拦截器Vue.http.interceptors.push使用详解
Apr 22 Javascript
three.js中3D视野的缩放实现代码
Nov 16 Javascript
vue的三种图片引入方式代码实例
Nov 19 Javascript
extjs4图表绘制之折线图实现方法分析
Mar 06 Javascript
Vue+scss白天和夜间模式切换功能的实现方法
Jan 05 Vue.js
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如何实现Unicode和Utf-8编码相互转换
2015/07/29 PHP
CodeIgniter配置之SESSION用法实例分析
2016/01/19 PHP
php版交通银行网银支付接口开发入门教程
2016/09/26 PHP
PHP使用PDO访问oracle数据库的步骤详解
2017/09/29 PHP
ThinkPHP5&amp;5.1框架关联模型分页操作示例
2019/08/03 PHP
修改好的jquery滚动字幕效果实现代码
2011/06/22 Javascript
jQuery 阴影插件代码分享
2012/01/09 Javascript
JavaScript中判断整数的多种方法总结
2014/11/08 Javascript
浅析jQuery Ajax请求参数和返回数据的处理
2016/02/24 Javascript
jquery实现列表上下移动功能
2016/02/25 Javascript
分分钟玩转Vue.js组件
2016/10/25 Javascript
Vue.js:使用Vue-Router 2实现路由功能介绍
2017/02/22 Javascript
vue.js如何更改默认端口号8080为指定端口的方法
2017/07/14 Javascript
vuejs+element-ui+laravel5.4上传文件的示例代码
2017/08/12 Javascript
js推箱子小游戏步骤代码解析
2018/01/10 Javascript
JS设计模式之命令模式概念与用法分析
2018/02/06 Javascript
用JS实现根据当前时间随机生成流水号或者订单号
2018/05/31 Javascript
vue插件开发之使用pdf.js实现手机端在线预览pdf文档的方法
2018/07/12 Javascript
JS前端知识点总结之页面加载事件,数组操作,DOM节点操作,循环和分支
2019/07/04 Javascript
jquery-ui 进度条功能示例【测试可用】
2019/07/25 jQuery
[01:18]PWL开团时刻DAY4——圣剑与抢盾
2020/11/03 DOTA
[01:10:48]完美世界DOTA2联赛PWL S2 GXR vs PXG 第一场 11.18
2020/11/18 DOTA
django用户登录和注销的实现方法
2018/07/16 Python
pandas 空数据处理方法详解
2019/11/02 Python
Django3.0 异步通信初体验(小结)
2019/12/04 Python
HTML5实现音频和视频嵌入的方法
2018/08/22 HTML / CSS
Nike英国官网:Nike.com (UK)
2017/02/13 全球购物
戴森比利时官方网站:Dyson BE
2020/10/03 全球购物
美国亚马逊旗下时尚女装网店:SHOPBOP(支持中文)
2020/10/17 全球购物
行政经理的岗位职责
2013/11/23 职场文书
求职自荐信的格式
2014/04/07 职场文书
关爱留守儿童标语
2014/06/18 职场文书
六一儿童节标语
2014/10/08 职场文书
云台山导游词
2015/02/03 职场文书
教师辞职信范文
2015/02/28 职场文书
2019七夕节祝福语36句,快来收藏吧
2019/08/06 职场文书