我不知道为什么人们不回答这个问题。我正在制作一个水平无限循环 slider 。我正在使用的方法是制作一个包含 3 个图像的 ul
容器,例如,如果有 3 个图像,则克隆第一个图像并将其放置到 slider 的末尾,与最后一个图像相同克隆并将其放在第一张图像之前。所以现在总图像是 5。默认 slider 转换总是从第一张图像开始,而不是从克隆图像开始。这是一个 example .我面临的是,我想在 slider 到达最后一个克隆图像后重置 slider ,并像旋转木马 slider 一样连续循环。我尝试将 addEventListener 与事件名称 transitionend 一起使用,但该事件未正确执行并显示出不满意的行为。有办法解决这个问题吗?
(function () {
var resetTranslation = "translate3d(-300px,0px,0px)";
var elm = document.querySelector('.Working');
elm.style.transform = resetTranslation;
var arr = document.querySelectorAll('.Working li');
var clonefirst,
clonelast,
width = 300;
index = 2;
clonefirst = arr[0].cloneNode(true);
clonelast = arr[arr.length - 1].cloneNode(true);
elm.insertBefore(clonelast, arr[0]);
arr[arr.length - 1].parentNode.insertBefore(clonefirst, arr[arr.length - 1].nextSibling);
//Update
arr = document.querySelectorAll('.Working li');
elm.style.transition = 'transform 1.5s ease';
setInterval(function () {
elm.style.transform = 'translate3d(-' + index * width + 'px,0px,0px)';
if (index == arr.length - 1) {
elm.addEventListener('transitionend', function () {
elm.style.transform = resetTranslation;
});
index = 1;
}
index++;
}, 4000)
})();
*{
box-sizing: border-box;
}
.wrapper{
position: relative;
overflow: hidden;
height: 320px;
width: 300px;
}
.Working{
list-style: none;
margin: 0;
padding: 0;
position: relative;
width: 3125%;
}
.Working li{
position: relative;
float: left;
}
img{
max-width: 100%;
display: block;
}
.SubContainer:after{
display: table;
clear: both;
content: "";
}
<div class="wrapper">
<ul class="SubContainer Working">
<li> <img class="" src="http://i.imgur.com/HqQb9V9.jpg" /></li>
<li><img class="" src="http://i.imgur.com/PMBBc07.jpg" /></li>
<li><img class="" src="http://i.imgur.com/GRrGSxe.jpg" /></li>
</ul>
</div>
最佳答案
我弄乱了你的代码来修复:https://jsfiddle.net/rap8o3q0/
变化的部分:
var currentItem = 1;
setInterval(function () {
var getWidth = window.innerWidth;
if(len === currentItem){
i = 1;
currentItem = 1;
} else {
currentItem++;
i++;
}
var val = 'translate3d(-' + (i-1) * getWidth + 'px,0px,0px)';
UnorderedListElement.style.transform = val;
}, 3000);
关于Javascript Slider 在过渡结束时无法正常工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43008921/