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？请运行此工作代码段：

＆＃13;

$(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');
	}
});

＆＃13;

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

＆＃13;

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

＆＃13;

我删除了混合的vanilla JS并使用jQuery来保持更加一致。

要检查的其他一些事情，因为Javascript可能根本没有运行：

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

图像滑块不起作用

2 个答案: