Javascript 幻灯片放映不起作用

Question

我正在尝试创建幻灯片放映，其中每张幻灯片显示 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>

Answer 1

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

我添加了一个在 body.onload 上运行的初始化函数，它设置了你的全局变量，您的点击侦听器，并启动 setinterval
我注释掉了你在顶部设置全局变量的位置，并声明它们现在在 init() 中设置

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

Answer 2

您需要将 javascript 放在 DOM 就绪事件上，或者在元素呈现后移动函数，即：就在 </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>

Javascript 幻灯片放映不起作用

Javascript for Slideshow not working

html

javascript

css

slideshow