幻灯片的Javascript无法正常工作

时间：2017-06-16 16:23:17

标签： javascript html css slideshow

我正在尝试创建幻灯片，每张幻灯片的显示时间间隔为2000毫秒，但是，我无法显示第二张幻灯片...我已经在下方添加了我的Javascript和CSS以及任何帮助或简单您认为有用的修改将非常感激。我相信这是一个简单的解决方案，但我只需要另外一双眼睛来帮助解决这个问题...... 

body{
  background: white;
  font-family: 'Raleway', sans-serif;
  margin: 0 auto;
}
/* FOR SLIDES */

/*
essential styles:
these make the slideshow work
*/
#slides{
	position: relative;
	height: 100%;
	padding: 0px;
	list-style-type: none;
}

.slide{
	position: absolute;
	left: 0px;
	top: 0px;
	width: 100%;
	height: 100%;
	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;
}



/*
non-essential styles:
just for appearance; change whatever you want
*/

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

.slide:nth-of-type(1){
	background: url(Slide0.png) no-repeat;
  background-size: cover;
  background-position: 50% 50%;
}
.slide:nth-of-type(2){
	background: url(Slide1.png) no-repeat;
  background-size: cover;
  background-position: 50% 50%;
}
.slide:nth-of-type(3){
	background: url(Slide2.png) no-repeat;
  background-size: cover;
  background-position: 50% 50%;
}
.slide:nth-of-type(4){
	background: url(Slide3.png) no-repeat;
  background-size: cover;
  background-position: 50% 50%;
}
.slide:nth-of-type(5){
	background: url(Slide4.png) no-repeat;
  background-size: cover;
  background-position: 50% 50%;
}
<DOCTYPE! html>
   <head>
      <link href="https://fonts.googleapis.com/css?family=Raleway:100" rel="stylesheet">
      <!-- CSS -->

      <link rel="stylesheet" type="text/css" href="style.css"/>
      <title>Widget1.0</title>
      <!-- JS!!! -->
      <script>
      var slides = document.querySelectorAll('#slides .slide');
      var currentSlide = 0;
      var slideInterval = setInterval(nextSlide,2000);

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

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

      function pauseSlideshow(){
        pauseButton.innerHTML = 'Play';
        playing = false;
        clearInterval(slideInterval);
      }

      function playSlideshow(){
        pauseButton.innerHTML = 'Pause';
        playing = true;
        slideInterval = setInterval(nextSlide,2000);
      }

      pauseButton.onclick = function(){
        if(playing){ pauseSlideshow(); }
        else{ playSlideshow(); }
      };
    </script>
   </head>
   <body>
      <ul id="slides">
        <li class="slide showing" id="slide1">Slide 1</li>
        <li class="slide" id="slide2">Slide 2</li>
        <li class="slide" id="slide3">Slide 3</li>
        <li class="slide" id="slide4">Slide 4</li>
        <li class="slide" id="slide5">Slide 5</li>
      </ul>
      <button class="controls" id="pause">Pause</button>
   </body>
</html>

2 个答案:

答案 0 :(得分：0)

这只是代码执行。你应该设置你的变量，注册点击监听器并在加载页面时启动setinterval（甚至更好地使用jquery并使用ready事件

  1. 我添加了一个在body.onload上运行的init函数，用于设置你的 全局变量，您的单击侦听器，并启动setinterval
  2. 我注释了你在顶部设置全局变量的地方，并且刚刚声明了它们，因为它们现在在init（）中设置了

    3. <DOCTYPE! html>
   <head>
      <link href="https://fonts.googleapis.com/css?family=Raleway:100" rel="stylesheet">
      <!-- CSS -->

      <!-- <link rel="stylesheet" type="text/css" href="style.css"/> -->
      <title>Widget1.0</title>
      <style type='text/css'>
			body{
			  background: white;
			  font-family: 'Raleway', sans-serif;
			  margin: 0 auto;
			}
			/* FOR SLIDES */

			/*
			essential styles:
			these make the slideshow work
			*/
			#slides{
				position: relative;
				height: 100%;
				padding: 0px;
				list-style-type: none;
			}

			.slide{
				position: absolute;
				left: 0px;
				top: 0px;
				width: 100%;
				height: 100%;
				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;
			}



			/*
			non-essential styles:
			just for appearance; change whatever you want
			*/

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

			.slide:nth-of-type(1){
				background: url(http://placehold.it/720x246?text=Slide0.png) no-repeat;
			  background-size: cover;
			  background-position: 50% 50%;
			}
			.slide:nth-of-type(2){
				background: url(http://placehold.it/720x246?text=Slide1.png) no-repeat;
			  background-size: cover;
			  background-position: 50% 50%;
			}
			.slide:nth-of-type(3){
				background: url(http://placehold.it/720x246?text=Slide2.png) no-repeat;
			  background-size: cover;
			  background-position: 50% 50%;
			}
			.slide:nth-of-type(4){
				background: url(http://placehold.it/720x246?text=Slide3.png) no-repeat;
			  background-size: cover;
			  background-position: 50% 50%;
			}
			.slide:nth-of-type(5){
				background: url(http://placehold.it/720x246?text=Slide4.png) no-repeat;
			  background-size: cover;
			  background-position: 50% 50%;
			}
      </style>
      <!-- JS!!! -->
      <script>
      var slides;// = document.querySelectorAll('#slides .slide');
      var currentSlide;// = 0;
      var slideInterval;// = setInterval(nextSlide,2000);

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

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

      function pauseSlideshow(){
        pauseButton.innerHTML = 'Play';
        playing = false;
        clearInterval(slideInterval);
      }

      function playSlideshow(){
        pauseButton.innerHTML = 'Pause';
        playing = true;
        slideInterval = setInterval(nextSlide,2000);
      }

      function init()
      {
      	playing = true;
      	pauseButton = document.getElementById('pause');
      	slides = document.querySelectorAll('#slides .slide');
      	currentSlide = 0;
      	slideInterval = setInterval(nextSlide,2000);
      	pauseButton.onclick = function(){
        if(playing){ pauseSlideshow(); }
	        else{ playSlideshow(); }
	      };
      }
    </script>
   </head>
   <body onload="init()">
      <ul id="slides">
        <li class="slide showing" id="slide1">Slide 1</li>
        <li class="slide" id="slide2">Slide 2</li>
        <li class="slide" id="slide3">Slide 3</li>
        <li class="slide" id="slide4">Slide 4</li>
        <li class="slide" id="slide5">Slide 5</li>
      </ul>
      <button class="controls" id="pause">Pause</button>
   </body>
</html>

答案 1 :(得分：0)

您需要将javascript放在DOM ready事件上，或者在元素呈现后移动函数，即：在</body>标记上方

body{
  background: white;
  font-family: 'Raleway', sans-serif;
  margin: 0 auto;
}
/* FOR SLIDES */

/*
essential styles:
these make the slideshow work
*/
#slides{
	position: relative;
	height: 200px;
	padding: 0px;
	list-style-type: none;
}

.slide{
	position: absolute;
	left: 0px;
	top: 0px;
	width: 100%;
	height: 100%;
	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;
}



/*
non-essential styles:
just for appearance; change whatever you want
*/

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

.slide:nth-of-type(1){
	background-color: red;
  background-size: cover;
  background-position: 50% 50%;
}
.slide:nth-of-type(2){
	background-color: blue;
  background-size: cover;
  background-position: 50% 50%;
}
.slide:nth-of-type(3){
	background-color: green;
  background-size: cover;
  background-position: 50% 50%;
}
.slide:nth-of-type(4){
	background-color: magenta;
  background-size: cover;
  background-position: 50% 50%;
}
.slide:nth-of-type(5){
	background-color: orange;
  background-size: cover;
  background-position: 50% 50%;
}
#pause
<DOCTYPE! html>
   <head>
      <link href="https://fonts.googleapis.com/css?family=Raleway:100" rel="stylesheet">
      <!-- CSS -->

      <link rel="stylesheet" type="text/css" href="style.css"/>
      <title>Widget1.0</title>
   </head>
   <body>
      <ul id="slides">
        <li class="slide showing" id="slide1">Slide 1</li>
        <li class="slide" id="slide2">Slide 2</li>
        <li class="slide" id="slide3">Slide 3</li>
        <li class="slide" id="slide4">Slide 4</li>
        <li class="slide" id="slide5">Slide 5</li>
      </ul>
      <button class="controls" id="pause">Pause</button>
      <!-- JS!!! -->
      <script>
      var slides = document.querySelectorAll('#slides .slide');
      var currentSlide = 0;
      var slideInterval = setInterval(nextSlide,2000);

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

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

      function pauseSlideshow(){
        pauseButton.innerHTML = 'Play';
        playing = false;
        clearInterval(slideInterval);
      }

      function playSlideshow(){
        pauseButton.innerHTML = 'Pause';
        playing = true;
        slideInterval = setInterval(nextSlide,2000);
      }

      pauseButton.onclick = function(){
        if(playing){ pauseSlideshow(); }
        else{ playSlideshow(); }
      };
    </script>

</body>
</html>

相关问题
最新问题