本文实例为大家分享了JS实现无限轮播无倒退的具体代码,供大家参考,具体内容如下
原理:每次移动前设置transition过渡效果,完成清除过渡效果,然后在到达最后一张图片的时候在清除过渡效果之后translateX(0)
另外需要jq的引用
HTML:
CSS:
.slide-container { max-width: 1230px; margin: auto; overflow: hidden; } .slide-container li { float: left; } .slide-container img { width: 100%; }
JS:
第一步我们应该在ul的所有li前面和后面复制一份一摸一样的li数组。
效果图:
在原来的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) { //到达边界回到初始状态 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
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。