Javascript 创建一个；幻灯片放映“；使用JS/jQuery的效果

我正试图创建一个网站，这将是一个演示。我的想法是使用JS制作幻灯片效果。现在我有一些我想要的功能，但它不是很干净。一般的想法是，您在第一张幻灯片上开始页面，当您按空格键时，它将淡出幻灯片，并在下一张幻灯片中淡出。然后，当您在第二页上按空格键时，它将转到第三页。诸如此类

下面我有一个使用JS-BIN的例子，但是这个想法没有很好地实现。如果有人能帮我充实一下，让它更实用，我会非常感激。理想情况下，代码将允许我轻松地添加幻灯片，但我不知道如何添加幻灯片。我一直在考虑使用for循环、switch语句或类似的语句，这样我就可以这样做了，但我无法确定到底需要使用哪一个。感谢您抽出时间阅读本文

---

您可以使用引导幻灯片。请参阅。

我摆弄了一下你的jsbin，它似乎工作得很好，尽管我确实将键盘代码改为13（回车），而不是32（空格键）——我发现这在不同的pc机上有所不同。我稍微调整了

css

，看看更新的代码（下面的代码片段）。我确实插入了虚拟文本-也许这是一种更简单的方法？除非你已经准备好了页面？但无论哪种方式，我都建议在你做演示之前先确认材料是否适合屏幕。你现在所要做的就是复制粘贴中心div，并将它们重命名为center3、4等。你的js目前在页面中循环，但你可以看到如何修复它——你成功地杀死了第一张幻灯片！它是一个WIP（在制品）

你的演讲有一个很好的开始

瑞秋

var lastloadded=“”；
$（文档）.ready（函数（）{
initIntro（）；
});
函数initIntro（）{
$（“头衔”）；
$（文件）。按键（功能（e）{
如果（e.keyCode==13）{
killIntro（）；
}
});
}
函数killIntro（）{
$（“#title”）.fadeOut（1000，function（）{
$（“正文”）。删除（“标题”）；
});
initPage0（）；
}
函数initPage0（）{
$（“#中心”）.fadeIn（1000，函数（）{
$（“正文”）；
});
$（文件）。按键（功能（e）{
如果（e.keyCode==13）{
killPage（）；
}
});
}
功能页（pg）{
$（“#中心”）.fadeOut（1000，函数（）{
$（“正文”）。删除（“#中间”）；
initPage1（）；
});
}
函数initPage1（）{
$（“#center2”）.fadeIn（1000，函数（）{
$（“body”）.load（“./pages/page1.php”）；
});
}

正文{
字体系列：'apercuregular'，arial，无衬线；
背景色：#96bff7；
溢出：隐藏；
位置：绝对位置；
边际：0px；
顶部：0px；
左：0px；
宽度：100%；
身高：100%；
z指数：10；
}
h2，h3，h4{文本对齐：居中；}
div节{text align:justify；}
#头衔{
位置：绝对位置；
宽度：100%；
身高：100%；
最高：5%；
保证金：0自动；
字体大小：300；
线高：1.1米；
背景色：#96bff7；
z指数：10；
}
#居中{
位置：相对位置；
宽度：100%；
身高：100%；
最高：5%；
保证金：0自动；
字体大小：300；
线高：1.1米；
背景色：#96bff7；
z指数：9；
}
#中心2{
位置：相对位置；
宽度：100%；
身高：100%；
最高：5%；
保证金：0自动；
字体大小：300；
线高：1.1米；
背景色：#96bff7；
z指数：8；
}

演示
演示
叫你的名字
页
Lorem ipsum dolor sit amet，是一位杰出的献身者。马萨十字勋章。这是一种粗制滥造的侵权行为。毛里斯家族的罗博蒂斯，生命之箭。埃涅亚钻石，生命之前，奥奇十字勋章。在莱克萨斯佩伦特斯，奥古斯·斯克列斯克·康格。这是我们的赌注，我是帕特·奥奇·康格。预防性口臭。Mauris eget vulputate nisl，commodo调味品nisi。整粒苏打水，不含马蒂斯·利奥·库苏斯。两人在一起，两人坐在一起。在ullamcorper molestie arcu，在Consequeat augue eleifend tincidunt。库拉比图尔·奎斯·图皮斯的效率，我的时间，亨德雷特·洛雷姆


拉奥里特直径。前庭是一个巨大的前庭，是一个巨大的前庭，是一个特殊的前庭，是一个自由的前庭。奥古斯·特里斯蒂克·奥古斯（tristique augue），非比本杜姆·多洛（bibendum dolor）。在侵权行为中有两种情况。自由女神坐在一个充满爱欲的房间里，专注于分子的效率。在这一点上，我们可以从中找到解决办法，从中找到正确的答案。毛里斯·菲尼布斯·瓦普塔特·森佩尔。生命之光。这是一个温和的封建制度。非尼西智人。相位ac ipsum eu ipsum mattis ALIQUA eu purus vitae eu purus。自由女神。Phasellus非finibus erat

第2页
Lorem ipsum dolor sit amet，是一位杰出的献身者。马萨十字勋章。这是一种粗制滥造的侵权行为。毛里斯家族的罗博蒂斯，生命之箭。埃涅亚钻石，生命之前，奥奇十字勋章。塞德在佩伦茨克的《奥古斯权杖》中。这是我们的赌注，我是帕特·奥奇·康格。预防性口臭。Mauris eget vulputate nisl，commodo调味品nisi。整粒苏打水，不含马蒂斯·利奥·库苏斯。两人在一起，两人坐在一起。在ullamcorper molestie arcu，在Consequeat augue eleifend tincidunt。库拉比图尔·奎斯·图皮斯的效率，我的时间，亨德雷特·洛雷姆


拉奥里特直径。前庭是一个巨大的前庭，是一个巨大的前庭，是一个特殊的前庭，是一个自由的前庭。奥古斯·特里斯蒂克·奥古斯（tristique augue），非比本杜姆·多洛（bibendum dolor）。在侵权行为中有两种情况。自由女神坐在一个充满爱欲的房间里，专注于分子的效率。Sed eleifend，直径a ia
<div  class="div">IntroPage</div>
  <div class="div">Page0</div>
  <div class="div">Page1</div>
  <div class='div'>
  END
  </div>

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;

}

   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);
              }
            }
          }
        });