Question

我为滑块编写了一个nextSlide() Javascript函数，但它只显示一张幻灯片，并且不会移动到下一张幻灯片。我的代码：

<script type="text/javascript">
    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';
    }
</script>

我尝试将其包含在我的HTML中，但它仍无效。

              <html>
           <head>
           <title>hd</title>
                <style>

                  #slides {
                    position: relative;
                 height: 300px;
                  padding: 0px;
                   margin: 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;
                   }


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

           .slide:nth-of-type(1) {
                   background: red;
                   }
             .slide:nth-of-type(2) {
               background: orange;
                  }
             .slide:nth-of-type(3) {
               background: green;
                }
               .slide:nth-of-type(4) {
              background: blue;
          }
             .slide:nth-of-type(5) {
             background: purple;
          }

              </style>

           <script type="text/javascript">
             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';
          }
           </script>

         </head>

          <body>
        <ul id="slides">
           <li class="slide showing">Slide 1</li>
          <li class="slide">Slide 2</li>
          <li class="slide">Slide 3</li>
          <li class="slide">Slide 4</li>
           <li class="slide">Slide 5</li>
              </ul>





       </body>
       </html>

为什么滑块的函数nextSlide（）不起作用？

0 个答案: