javascript - 如何取消向下滑动动画并仅制作静态幻灯片

不知道如何制作静态幻灯片，得到了这种向下滑动的动画。
我应该改变什么？
也许我利用“位置”属性赚了一笔？
还是一般的定位？
否则我的JS很烂...

        #slides {
        position: relative;
        height: 500px;
        padding: 0px;
        margin: 0px;
        list-style-type: none;
    }

    .slide {
        width: 600px;
        height: 500px;
        margin-top: 0px;
        margin-left: 500px;
        opacity: 0;
        z-index: 1;
        -webkit-transition: opacity 1s;
        -moz-transition: opacity 1s;
        -o-transition: opacity 1s;
        transition: opacity 1s;
    }

    .showing {
        opacity: 1;
        z-index: 2;
    }

    .controls {
        display: none;
    }

    .slide {
        font-size: 40px;
        padding: 70px;
        box-sizing: border-box;
        background: #333;
        color: #fff;
        background-size: cover;
    }

    .controls {
        background: #333;
        color: #fff;
        border: none;
        padding: 20px 0px;
        font-size: 20px;
        cursor: pointer;
        border: 2px solid #fff;
        margin: 10px 0px 0px 10px;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 70px;
        position: relative;
        left: 38%;
        margin-top: 25px;
      }

    .controls:hover,
    .controls:focus {
        background: #eee;
        color: #333;
    }

    .buttons {
        position: absolute;
        left: 0px;
        top: 0px;
        z-index: 20;
        font-size: 0px;
    }

    .controls:nth-of-type(2), .controls:nth-of-type(3) {
        width: 9%;
    }

   // Some JS
    var controls = document.querySelectorAll('.controls');
    for(var i=0; i<controls.length; i++){
     controls[i].style.display = 'inline-block';
    }

    var slides = document.querySelectorAll('#slides .slide');
    var currentSlide = 0;
    var slideInterval = setInterval(nextSlide,2000);

    function nextSlide(){
     goToSlide(currentSlide+1);
    }

   function previousSlide(){
    goToSlide(currentSlide-1);
   }

   function goToSlide(n){
    slides[currentSlide].className = 'slide';
    currentSlide = (n+slides.length)%slides.length;
    slides[currentSlide].className = 'slide showing';
   }


  var playing = true;
  var pauseButton = document.getElementById('pause');

  function pauseSlideshow(){
    pauseButton.innerHTML = '&#9658;'; // play character
    playing = false;
    clearInterval(slideInterval);
  }

  function playSlideshow(){
   pauseButton.innerHTML = '&#10074;&#10074;'; // pause character
   playing = true;
   slideInterval = setInterval(nextSlide,2000);
  }

  pauseButton.onclick = function(){
    if(playing){ pauseSlideshow(); }
    else{ playSlideshow(); }
  };

 var next = document.getElementById('next');
 var previous = document.getElementById('previous');

 next.onclick = function(){
  pauseSlideshow();
  nextSlide();
 };
previous.onclick = function(){
  pauseSlideshow();
  previousSlide();
};

抱歉，没有评论:(

最佳答案

您不想使用opacity属性隐藏图像，它仍然会“占用空间”，因此将元素向下移动，

您将需要使用display，该元素不会为该元素绘制任何内容，也不会为其分配任何空间。

在CSS中，将.slide中的opacity: 0替换为display: none

并用opacity: 1替换.show中的display: block

它应该解决您的问题

关于javascript - 如何取消向下滑动动画并仅制作静态幻灯片，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/38346760/