Image Slider funktioniert nicht

Question

Ich habe einen Bild-Slider gemacht, aber dies ändert nicht die Bilder, nur das erste Bild zeigt.

Dies ist mein 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> 

Ich bin mit jQuery 3.1.0 und es funktioniert nicht

Answer 1

Ich habe Ihren Code überprüft und es scheint gut zu funktionieren, abgesehen von dem unnötigen Anruf nextSlide() nahe dem Ende des Dokuments bereit. Vielleicht ist es dein CSS? Bitte führen Sie diesen Arbeits Code-Schnipsel:

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

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

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

ich gemischte Vanille JS entfernt und verwenden jQuery Dinge zu halten konsistent.

Einige andere Dinge als Javascript überprüfen kann überhaupt nicht ausgeführt werden:

• prüfen, um Fehler in der Konsole
• Überprüfen Sie jQuery verknüpfen richtig (vor Ihrem Code, Script-Tags analysiert und ausgeführt von oben nach unten in Reihenfolge, außer Sie anders angeben)
• Stellen Sie sicher, dass Sie nur eine $(document).ready pro Seite haben.

Answer 2

ich Ihre js Code-Bit aktualisiert haben, können Sie versuchen Sie es mit diesem

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