javascript - 我怎样才能用 Vanilla 制作无限旋转木马？

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>