如何用香草制作无限旋转木马？

Question

imgSlideEvent();
function imgSlideEvent(){
    var slider = document.querySelector('.img-slider');
    var img = document.querySelectorAll('.img-slider > img');
    var left = document.querySelector('.left-btn');
    var right = document.querySelector('.right-btn');
    left.addEventListener('click',function(){
        let first = document.querySelector('.img-slider > img');
        slider.appendChild(first);
        
    });
    right.addEventListener('click',function(){
        var last = document.querySelector('.img-slider > img:last-child');
        slider.insertBefore(last,document.querySelector('.img-slider > img'));

    });
}

*{
    margin: 0;
    padding: 0;
    outline: none;
    border:none;
    background-color: transparent;
}
body{
    max-width: 100vw;
    min-height: 300vh;
}

header{
    display: flex;
    justify-content: center;
}
section{
    display: flex;
    justify-content: center; 
}
.dir-col{
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
}
.left-btn, .right-btn{
    position: absolute;
    width: 50px;
    height: 80px;
    background-color: rgba(0,0,0,0.4);
    top: 0;
    bottom: 0;
    margin: auto;
    cursor: pointer;
}
.left-btn{
    left: -70px;
}
.left-btn > span, .right-btn > span{
    display: inline-block;
    position: absolute;
    top:0;
    bottom:0;
    left: 0;
    right: 0;
    margin: auto;
    width: 20px;
    height: 20px;
    border-top: 2px solid white;
    border-left: 2px solid white;   
}
.left-btn > span{
    transform:rotate(-45deg) translate(3px, 3px);
}
.right-btn > span{
    transform:rotate(135deg) translate(3px, 3px);
}
.right-btn{
    right: -70px;
}
.img-slider{
    width: 1044px;
    font-size: 0;
    overflow: hidden;
    white-space: nowrap;

}
.img-slider > img{
    margin: 0 10px;
    transition: all 1s;
    animation: create 1s;
}

@keyframes create{
    0%{
        opacity: 0;
        transform: translateX(50px);
    }
    100%{
        opacity: 1;
        transform: translateX(0px);
    }
}

<section class="dir-col" style="padding-bottom: 150px;padding-top: 100px;">
  <section style="position: relative;">
    <button class="left-btn"><span></span></button>
    <div class="img-slider">
      <img src="https://i.imgur.com/QLlXuyU.jpg" />
      <img src="https://i.imgur.com/Ugq9d3S.jpg" />
      <img src="https://i.imgur.com/deqBfhh.jpg" />
      <img src="https://i.imgur.com/deqBfhh.jpg" />
    </div>
    <button class="right-btn"><span></span></button>
  </section>
</section>

我用Vanilla JS制作了Image Slider，见上面的代码。

但是，它存在问题。

单击该按钮时，所有图像都应随动画移动。

但它没有按预期工作。只有一个元素（新元素）正常工作，其他任何东西似乎都没有动画。

如何确保所有元素都是动画的？

Answer 1

您的代码中存在许多错误：

• 当前行为的原因是事实上只有1个图像实际发生变化（移动其位置），因此动画重新应用于其上，其他图像不受影响因此它们静止不动
• 您需要某种容器才能一次移动所有图像，否则您需要以某种方式“触摸”图像以便在其上重新播放动画
• 你似乎有左/右切换

我已更新您的代码以添加所有遗漏的功能并修复上面列出的问题。

function imgSlideEvent() {
    var slider = document.querySelector('.img-slider');
    var container = document.querySelector('.slider-images');
    var left = document.querySelector('.left-btn');
    var right = document.querySelector('.right-btn');

    left.addEventListener('click', function () {
        var oldImg = container.querySelector('img:last-child');
        var newImg = oldImg.cloneNode();
        container.insertBefore(newImg, container.childNodes.item(0));
        slider.classList.add('move-right');
        oldImg.classList.add('disappear');
        newImg.classList.add('appear');
        setTimeout(function () {
            container.removeChild(oldImg);
            slider.classList.remove('move-right');
            newImg.classList.remove('appear');
        }, 1000);
    });

    right.addEventListener('click', function () {
        var oldImg = container.querySelector('img:first-child');
        var newImg = oldImg.cloneNode();
        container.appendChild(newImg);
        slider.classList.add('move-left');
        oldImg.classList.add('disappear');
        newImg.classList.add('appear');
        setTimeout(function () {
            container.removeChild(oldImg);
            slider.classList.remove('move-left');
            newImg.classList.remove('appear');
        }, 1000);
    });

    // Let appearance animation to be played just once
    setTimeout(function () {
        slider.classList.remove('new');
    }, 1000);
}

imgSlideEvent();

* {
    margin: 0;
    padding: 0;
    outline: none;
    border: none;
    background-color: transparent;
}

body {
    max-width: 100vw;
    min-height: 300vh;
}

header {
    display: flex;
    justify-content: center;
}

section {
    display: flex;
    justify-content: center;
}

.dir-col {
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
}

.left-btn, .right-btn {
    position: absolute;
    width: 50px;
    height: 80px;
    background-color: rgba(0, 0, 0, 0.4);
    top: 0;
    bottom: 0;
    margin: auto;
    cursor: pointer;
}

.left-btn {
    left: -70px;
}

.left-btn > span, .right-btn > span {
    display: inline-block;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    width: 20px;
    height: 20px;
    border-top: 2px solid white;
    border-left: 2px solid white;
}

.left-btn > span {
    transform: rotate(-45deg) translate(3px, 3px);
}

.right-btn > span {
    transform: rotate(135deg) translate(3px, 3px);
}

.right-btn {
    right: -70px;
}

.img-slider {
    width: 1044px;
    font-size: 0;
    overflow: hidden;
    white-space: nowrap;
}

.img-slider img {
    margin: 0 10px;
}

/* Initial animation */
.img-slider.new .slider-images {
    animation: create 1s;
}

@keyframes create {
    0% {
        opacity: 0;
        transform: translateX(50px);
    }
    100% {
        opacity: 1;
        transform: translateX(0px);
    }
}

/* Movement animations */
.img-slider.move-left .slider-images {
    animation: move-left 1s;
}

.img-slider.move-right .slider-images {
    animation: move-right 1s;
}

/* 261px in animation is 241px of your images + 2 * 10px margin between them */
@keyframes move-left {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-261px);
    }
}

@keyframes move-right {
    0% {
        transform: translateX(-261px);
    }
    100% {
        transform: translateX(0);
    }
}

/* Animations for appear / disappear of the images, optional */
.img-slider img.appear {
    animation: appear 1s;
}

.img-slider img.disappear {
    animation: disappear 1s;
}

@keyframes appear {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@keyframes disappear {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

<section class="dir-col" style="padding-bottom: 150px;padding-top: 100px;">
    <section style="position: relative;">
        <button class="left-btn"><span></span></button>
        <div class="img-slider new">
            <div class="slider-images">
                <img src="https://i.imgur.com/QLlXuyU.jpg"/>
                <img src="https://i.imgur.com/Ugq9d3S.jpg"/>
                <img src="https://i.imgur.com/deqBfhh.jpg"/>
                <img src="https://i.imgur.com/deqBfhh.jpg"/>
            </div>
        </div>
        <button class="right-btn"><span></span></button>
    </section>
</section>