我想在Javascript中制作一个无限旋转木马。当元素离开屏幕时,我会将它们克隆并将它们粘贴到列表的末尾。但是一分钟后HTML布局中有很多克隆元素。我决定在克隆后删除该元素。但是所有元素都会立即发生偏移。如何避免这种情况?或者也许有另一种算法来实现这个无限旋转木马?
这里是代码:https://codepen.io/alessandro-kex/pen/abGWNEK
这里是代码:https://codepen.io/alessandro-kex/pen/abGWNEK
window.addEventListener("load", function () {
const slideContainer = document.querySelector(".carousel");
const slidesWrapper = document.querySelector(".carousel-slides");
let slides = document.querySelectorAll(".carousel-slide");
let index = 0;
const interval = 1500;
let moveDistance = 0;
const paddingRight = 50;
let lastSlideIndex = slides.length - 1;
let firstClone;
const startSlide = (index) => {
this.setInterval(() => {
moveDistance = moveDistance + slides[index].clientWidth + paddingRight;
slidesWrapper.style.transform = `translateX(${-moveDistance}px)`;
slidesWrapper.style.transition = "1s";
firstClone = slides[index].cloneNode(true);
firstClone.id = `first-clone-${index}`;
slidesWrapper.append(firstClone);
/*If uncomment it - then the problem starts */
//slides[index].remove();
index++;
}, interval);
};
startSlide(index);
});
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.carousel {
margin: 0 auto;
width: 100%;
position: relative;
}
.carousel-slides {
display: flex;
list-style: none;
gap: 50px;
flex-shrink: 1;
}
.carousel-slide {
position: relative;
min-width: 0;
flex-shrink: 0;
}
.carousel-slide {
height: 100px;
display: flex;
align-items: center;
justify-content: center;
min-width: 0;
}
.carousel-item-text {
white-space: nowrap;
}
.carousel-item-img {
width: 100px;
height: auto;
}
.round {
padding: 30px 50px;
border-radius: 120px;
}
.light-blue {
background-color: #d8f1ff;
}
.pink {
background-color: #ffeaf0;
}
.purpule {
background-color: #eae9ff;
}
<div class="carousel">
<ul class="carousel-slides">
<li class="carousel-slide" data-number="0">
<img src="https://via.placeholder.com/150" alt="" class="carousel-item-img">
</li>
<li class="carousel-slide light-blue round" data-number="1">
<span class="carousel-item-text">11111111 1111 <br> 111111111</span>
</li>
<li class="carousel-slide">
<img src="https://via.placeholder.com/150" alt="" class="carousel-item-img">
</li>
<li class="carousel-slide pink round">
<span class="carousel-item-text">22222 22222 <br> 222222222 2222222222 222222222</span>
</li>
<li class="carousel-slide">
<img src="https://via.placeholder.com/150" alt="" class="carousel-item-img">
</li>
<li class="carousel-slide light-blue round">
<span class="carousel-item-text">333 333333333 <br> 333333333333</span>
</li>
<li class="carousel-slide">
<img src="https://via.placeholder.com/150" alt="" class="carousel-item-img">
</li>
<li class="carousel-slide purpule round">
<span class="carousel-item-text">4444 444444444444<br> 44444</span>
</li>
<li class="carousel-slide">
<img src="https://via.placeholder.com/150" alt="" class="carousel-item-img">
</li>
<li class="carousel-slide pink round">
<span class="carousel-item-text">55555555 55555<br> 55 5555</span>
</li>
<li class="carousel-slide">
<img src="https://via.placeholder.com/150" alt="" class="carousel-item-img">
</li>
<li class="carousel-slide pink round">
<span class="carousel-item-text">6666666 6666666666 <br> 66666 6666666 66666</span>
</li>
<li class="carousel-slide">
<img src="https://via.placeholder.com/150" alt="" class="carousel-item-img">
</li>
<li class="carousel-slide light-blue round">
<span class="carousel-item-text">777777 777 777<br> 77 77777</span>
</li>
<li class="carousel-slide">
<img src="https://via.placeholder.com/150" alt="" class="carousel-item-img">
</li>
<li class="carousel-slide purpule round" data-number="16">
<span class="carousel-item-text">888 8888<br> 88888888</span>
</li>
</ul>
</div>