javascript - 使用 JS/jQuery 创建 "Slideshow"效果

Question

我正在尝试创建一个用于演示的网站。我有这个想法，用JS做成幻灯片效果。现在我有一些我想要的功能，但它不是很干净。一般的想法是你从第一张幻灯片开始页面，当你按下空格键时，它会淡出幻灯片并淡入下一张幻灯片。然后，当您在第二页上按空格键时，它会移动到第三页。等等等等。

我在下面有一个使用 JS BIN 的例子，但这个想法并没有很好地实现。如果有人可以帮助我充实它并使其更具功能性，我将非常感激。理想情况下，代码可以让我轻松添加幻灯片，但我不知道如何操作。我正在考虑使用 for 循环、switch 语句或类似的东西来让我这样做，但我无法确定我需要确切使用哪一个。感谢您花时间阅读到这里。

JS BIN EXAMPLE

Answer 1

您可以大大简化 HTML 和 CSS，对于外观相同的元素，无需重复 css 或使用 ids:

<div  class="div">IntroPage</div>
  <div class="div">Page0</div>
  <div class="div">Page1</div>
  <div class='div'>
  END
  </div>

CSS:

body{
    font-family: 'apercuregular', arial, sans-serif;
    background-color: #96bff7;
    overflow:hidden;
    position: absolute;
    margin: 0px;
    top:     0px;
    left:    0px;
    width:  100%;
    height: 100%;
    z-index:  10;
}




.div{
    position:absolute;
    width:400px;
    top:170px;
    left:50%;
    margin-left:-26px;
    font-weight:300;
    line-height:110%;
    text-align:justify;
    background-color:#96bff7;

}

当然，jQuery 部分可以更优雅，但这也可以。设置 z-indexes(避免 css 重复)，设置计数器，幻灯片数量，并在 ENTER 点击时滑动:

   i = 0;
        num_of_slides=4;
    //set z-indexes
        $('.div').each(function(i) {
        $(this).css('z-index',num_of_slides-i);
        });
        $(document).keypress(function(e) {
          if (e.keyCode == 13) {
            if (i <= num_of_slides) {
              i++;
              $('.div').eq(i).fadeIn(2000);
             $('.div').eq(i - 1).fadeOut(2000);
//if you want to go from the slideshow start
              if (i == num_of_slides) {
                i = 0;
                $('.div').eq(i).fadeIn(2000);
              }
            }
          }
        });

演示:https://jsfiddle.net/tx0p4xge/