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

不知道如何制作静态幻灯片，得到了这个向下滑动的动画。 我应该换什么？ 也许我用“位置”属性制作了smth？ 还是一般的定位？ 或者我的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();
};

#幻灯片{
位置：相对位置；
高度：500px；
填充：0px；
边际：0px；
列表样式类型：无；
}
.幻灯片{
宽度：600px；
高度：500px；
边际上限：0px；
左边距：500px；
不透明度：0；
z指数：1；
-webkit转换：不透明度1s；
-moz转变：不透明度1s；
-o-转变：不透明度1s；
过渡：不透明度1s；
}
.展示{
不透明度：1；
z指数：2；
}
.控制{
显示：无；
}
.幻灯片{
字体大小：40px；
填充：70px；
框大小：边框框；
背景：#333；
颜色：#fff；
背景尺寸：封面；
}
.控制{
背景：#333；
颜色：#fff；
边界：无；
填充：20px 0px；
字体大小：20px；
光标：指针；
边框：2倍实心#fff；
保证金：10px 0px 0px 10px；
显示器：flex；
证明内容：中心；
对齐项目：居中；
宽度：70px；
位置：相对位置；
左：38%；
边缘顶部：25px；
}
.控件：悬停，
.控制：焦点{
背景：#eee；
颜色：#333；
}
.按钮{
位置：绝对位置；
左：0px；
顶部：0px；
z指数：20；
字体大小：0px；
}
.控件：第n个类型（2），.控件：第n个类型（3）{
宽度：9%；
}
//一些JS
var controls=document.querySelectorAll（'.controls'）；
对于（var i=0；i您不想使用
opacity
属性隐藏图像，它仍然会“占用空间”，因此会向下移动元素

您需要使用
显示
，它不会为此元素绘制任何内容，也不会为其分配任何空间

在CSS中，将.slide by
display:none

并替换中的
opacity:1
。显示方式为
display:block

它应该可以解决你的问题
这都不是JS。-也就是说，你可以设置许多不同属性的动画。有些属性比其他属性好。要避免JS属性。抱歉，但它仍然在向下滑动。我希望它只是在固定位置在彼此之间切换。好的，你能在html中包含一个codepen/JSFIDLE吗能看到你得到的确切效果吗？好的找到了解决方案我正在编辑我的awnser现在不客气，如果我们能在其他方面帮助你，请再来：D