图像滑块不工作

Question

我做了一个图片滑块，但这并没有改变图片，只是显示了第一张图片。

这是我的javascript

$(document).ready(function() {
  var slides = document.querySelectorAll('#images .image');
  var current = 0;


  function nextImage() {
    image[currentSlide].className = 'slide';
    current = (current+1)%images.length;
    images[current].className = 'image show';
  }
  var Interval = setInterval(nextImage,2000);
});

html:

<ul id="images">
    <li class="image show">Slide 1</li>
    <li class="image">Slide 2</li>
    <li class="image">Slide 3</li>
    <li class="image">Slide 4</li>
    <li class="image">Slide 5</li>
</ul>

我正在使用 jquery 3.1.0，但它无法正常工作

Answer 1

我已经更新了你的js代码位，你可以试试这个

$(document).ready(function() {
  var slides = document.querySelectorAll('#slides .slide');
  console.log(slides);
  var currentSlide = 0;
  var slideInterval = setInterval(nextSlide,2000);

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

Answer 2

我已经检查了你的代码，它似乎工作正常，除了在文档准备结束时不必要地调用 nextSlide() 之外。也许是你的 CSS？请运行这个工作代码片段：

$(document).ready(function() {
 var slides = $('#slides .slide');
 var currentSlide = 0;
 var slideInterval = setInterval(nextSlide, 2000);

 function nextSlide() {
  slides.removeClass('showing');
  currentSlide = (currentSlide + 1) % slides.length;
  slides.eq(currentSlide).addClass('showing');
 }
});

.slide {display:none;}
.showing {display:block;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<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>

我删除了混合原版 JS 并使用 jQuery 来保持一致性。

由于 Javascript 可能根本不是运行ning，因此需要检查一些其他事项：

检查控制台中的错误
检查您是否正确链接 jQuery（在您的代码之前，脚本标记按从上到下的顺序解析和执行，除非您另有说明）
确保每页只有一个 $(document).ready。

图像滑块不工作

Image slider is not working

javascript

jquery

slideshow