本文介绍了一种基于JavaScript实现的无限轮播图方案，通过复制首尾元素消除倒退现象，并结合CSS3过渡与鼠标滚轮事件处理，实现平滑的自动播放与手动交互功能。
JS实现无限轮播无倒退效果
本文分享了一段使用JavaScript实现的无限轮播代码，旨在提供无倒退效果的轮播解决方案，供开发者参考。
核心原理在于：在每次执行移动操作前启用CSS的transition过渡效果，待动画结束后立即清除该效果，并在到达最后一张图片时，通过清除过渡效果并重置translateX为0来实现无缝衔接。
此外，该实现依赖于jQuery库的引用。
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%;
}JavaScript逻辑如下：
首先，需要在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; 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以上就是本文的全部内容，希望对读者有所帮助，欢迎继续支持本站。