Question

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

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

JS BIN EXAMPLE

Answer 1

您可以使用bootstrap幻灯片显示。见this。

Answer 2

我摆弄你的jsbin并且似乎工作正常，虽然我确实将键码改为13（输入）而不是32（空格键） - 我发现这个因PC而异。我稍微调整了css，看看更新后的代码（下面的代码段）。我确实插入了虚拟文本 - 也许这可能是一种更简单的方法？除非你已准备好页面？但不管怎样，我建议您在演示之前验证材料是否适合屏幕。你现在要做的就是复制并粘贴中心div并将它们重命名为center3,4等等。你的js现在循环遍历页面，但你可以看到如何解决这个问题 - 你设法杀了第一张幻灯片！它是一个WIP（正在进行中）。

您演讲的一个良好开端。

迪

var lastLoaded = "";

$(document).ready(function(){
	initIntro();
});

function initIntro(){
	$("#title");

$(document).keypress(function(e){    
  
  if (e.keyCode == 13) {           
               killIntro();
       }
});

}

function killIntro(){
	
	$("#title").fadeOut(1000, function(){
		$("body").remove("#title");
	});
	
    initPage0();
}


function initPage0(){
	$("#center").fadeIn(1000, function(){
		$("body");
	});

$(document).keypress(function(e){    
  
  if (e.keyCode == 13) {           
               killPage();
  		}
	});
}


function killPage(pg){
	$("#center").fadeOut(1000, function(){
		$("body").remove("#center");
		initPage1();
	});
}

function initPage1(){
	$("#center2").fadeIn(1000, function(){
		$("body").load("./pages/page1.php");
	});
}

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;
}

h2, h3, h4{text-align:center;}

div section{text-align:justify;}
#title{
	position:absolute;
	width:100%;
    height:100%;
	top:5%;
	margin:0 auto;
	font-weight:300;
	line-height:1.1em;
	background-color:#96bff7;
  z-index: 10;
}

#center{
	position:relative;
	width:100%;
    height:100%;
	top:5%;
	margin:0 auto;
	font-weight:300;
	line-height:1.1em;
	background-color:#96bff7;
  z-index: 9;
}


#center2{
	position:relative;
	width:100%;
    height:100%;
	top:5%;
	margin:0 auto;
	font-weight:300;
	line-height:1.1em;
	background-color:#96bff7;
  z-index: 8;
}

<!DOCTYPE html>
<html>
<head>
<link href="https://code.jquery.com/ui/1.9.2/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css" />
<script src="https://code.jquery.com/jquery-1.8.3.js"></script>
<script src="https://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Presentation</title>
</head>
<body>
  <div id="title"><h2>Presentation</h2>
    <h4>by Your Name</h4></div>
  <div id="center"><h3>Page</h3>
    <section><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce vitae scelerisque massa. Cras sed tortor pellentesque dolor interdum dapibus. Sed lobortis feugiat mauris, vel posuere nunc sagittis vitae. Aenean diam purus, pretium vitae sem quis, varius scelerisque orci. Sed in lectus pellentesque augue scelerisque congue. Sed cursus ultrices ante, id volutpat orci congue sit amet. Proin suscipit ipsum nec enim varius consequat. Mauris eget vulputate nisl, commodo condimentum nisi. Integer sodales consectetur metus, non mattis leo cursus in. Duis lacinia molestie dui sit amet euismod. In ullamcorper molestie arcu, in consequat augue eleifend tincidunt. Curabitur quis turpis efficitur, tempus mi id, hendrerit lorem.</p>
<p>
Ut ut laoreet diam. Vestibulum bibendum, diam vitae cursus convallis, dui lorem ultrices est, ac consectetur libero est a dolor. Maecenas tincidunt tristique augue, non bibendum dolor. Duis ut dolor vel lorem hendrerit ultrices et in tortor. Curabitur bibendum libero sit amet eros rutrum, consectetur molestie lorem efficitur. Sed eleifend, diam a iaculis sollicitudin, lorem ipsum malesuada massa, ac aliquam lorem tortor nec justo. Mauris finibus vulputate semper. Quisque vitae tempus diam. Ut bibendum nisi nec massa blandit feugiat. Sed non nisi sapien. Phasellus ac ipsum eu ipsum mattis aliquam vitae eu purus. Proin vel egestas libero. Phasellus non finibus erat.</p></section></div>
  <div id="center2"><h3>Page2</h3>
      <section><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce vitae scelerisque massa. Cras sed tortor pellentesque dolor interdum dapibus. Sed lobortis feugiat mauris, vel posuere nunc sagittis vitae. Aenean diam purus, pretium vitae sem quis, varius scelerisque orci. Sed in lectus pellentesque augue scelerisque congue. Sed cursus ultrices ante, id volutpat orci congue sit amet. Proin suscipit ipsum nec enim varius consequat. Mauris eget vulputate nisl, commodo condimentum nisi. Integer sodales consectetur metus, non mattis leo cursus in. Duis lacinia molestie dui sit amet euismod. In ullamcorper molestie arcu, in consequat augue eleifend tincidunt. Curabitur quis turpis efficitur, tempus mi id, hendrerit lorem.</p>
<p>
Ut ut laoreet diam. Vestibulum bibendum, diam vitae cursus convallis, dui lorem ultrices est, ac consectetur libero est a dolor. Maecenas tincidunt tristique augue, non bibendum dolor. Duis ut dolor vel lorem hendrerit ultrices et in tortor. Curabitur bibendum libero sit amet eros rutrum, consectetur molestie lorem efficitur. Sed eleifend, diam a iaculis sollicitudin, lorem ipsum malesuada massa, ac aliquam lorem tortor nec justo. Mauris finibus vulputate semper. Quisque vitae tempus diam. Ut bibendum nisi nec massa blandit feugiat. Sed non nisi sapien. Phasellus ac ipsum eu ipsum mattis aliquam vitae eu purus. Proin vel egestas libero. Phasellus non finibus erat.</p></section></div>
</body>
</html>

Answer 3

您可以大量简化HTML和CSS，不需要重复css或使用id来查找相同的元素：

<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/

使用JS / jQuery创建“幻灯片”效果

3 个答案: