jQuery：从第一个开始隐藏并隐藏所有图像，然后滚动

Question

I can't change the HTML code, and it looks like this:

<div class="slider">
            <div class="slider-control">
                <button id="prev">Previous</button>
                <button class="foll">Next</button>
            </div>
            <div class="slider-image">
                <img src="html.png" alt="Html" />
                <img src="css.png" alt="Css" />
                <img src="jquery.png" alt="jQuery" />
            </div>
        </div>

When the program starts I need to show the first image. If I click on "Previous" I want to show the previous img (if the currently img showed is the first one, I want to show the last one), if I click on "Next" then I want to show the next img. I need it to be a generic solution case I need to use it also with more images. I tried with:

function showImage(){
    $(".slider-image img").not(":eq(n)").hide();
}

$(document).ready(function(){
    n = 0;
    showImage(n);
    $(".slider-control button").click(function(){

        if($(this).is("div.slider-control.prev")){
            n -= 1;
            showImage(n);
        }
        else if($(this).is("div.slider-control.foll")){
            n += 1;
            showImage(n);
        }   
    });
});

But it doesn't show anything

Answer 1

There was a few issues that I've fixed for you, but this should now work okay for you

---

showImage was not taking n as a paramater, but you were passing it that when you were calling it

function showImage() {... // Not taking the param you're passing
function showImage(n) {... // Now we are, and assigning it the name 'n'

You weren't using .show() on the element you wanted to show - you were only ever using .hide()

There was also an issue with how spamming the next or previous buttons would change the n higher / lower than your element count, and so you would end up selecting elements that didn't exist. To keep your n within the range of your elements, you can do this to loop back around an array's indexes

n = n % $('.slider-image img').length;

Finally, you weren't passing n to the :not(:eq(n)) - I've just used template literals to insert the variable cleanly

---

In the HTML, I set your buttons to both use IDs, because I felt this made more sense and helps readabilit

---

In the $(document).ready(... , you also had an error with your .is() - You were alredy working from the <button> element, so you're okay to check just on the ID of the buttons

 function showImage(n){ n = n % $(".slider-image img").length; $(".slider-image img").not(`:eq(${n})`).hide(); $(".slider-image img").eq(n).show(); } $(document).ready(function(){ n = 0; showImage(n); $(".slider-control button").click(function(){ if($(this).is("#prev")){ n -= 1; showImage(n); } else if($(this).is("#foll")){ n += 1; showImage(n); } }); }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="slider"> <div class="slider-control"> <button id="prev">Previous</button> <button id="foll">Next</button> </div> <div class="slider-image"> <img src="https://via.placeholder.com/150" alt="Html" /> <img src="https://via.placeholder.com/200" alt="Css" /> <img src="https://via.placeholder.com/250" alt="jQuery" /> </div> </div> 

Answer 2

this is he jquery code you, I hope you'll understand it easily, just replace the images, and change the style as you expected

 sliderInt=1; sliderNext=2; $(document).ready(function() { $("#slider > img#1").fadeIn(300); startSlider(); }) function startSlider() { count = $("#slider > img").size(); //run function every 3 secs loop = setInterval(function() { if(sliderNext > count) { sliderNext = 1; sliderInt = 1; } $("#slider > img").fadeOut(300); $("#slider > img#" + sliderNext).fadeIn(300); sliderInt = sliderNext; sliderNext++; }, 3000); } function prev() { newSlide = sliderInt -1; showSlide(newSlide); } function next() { newSlide = sliderInt +1; showSlide(newSlide); } function showSlide(id) { stopLoop(); if(id > count) { id = 1; } else if(id < 1) { id = count; } $("#slider > img").fadeOut(300); $("#slider > img#" + id).fadeIn(300); sliderInt = id; sliderNext = id + 1; startSlider(); } function stopLoop() { //stop the loop you created in setInterval window.clearInterval(loop); } $("#slider > img").hover( function() { stopLoop(); }, function() { startSlider(); } ); 

 .wrapper { width:600px; margin: 0 auto; } #slider { width: 600px; height: 400px; overflow: hidden; margin: 30px auto; } #slider > img { width: 600px; height: 400px; float: left; display: none; } a { padding: 5px 10px; background-color: #F0F0F0; margin-top: 30px; text-decoration:none; color: #666; } a.left { float:left; } a.right { float:right; } 

 <!-- http://www.getupanddosomething.org/wp-content/uploads/2013/11/220.jpg http://images2.fanpop.com/image/photos/9400000/Aaaaaawwwwwwwwww-Sweet-puppies-9415255-1600-1200.jpg http://offleashk9training.com/dogtrainingblog/wp-content/uploads/2014/04/Sweet-puppy-with-bunny-puppies-14749075-1600-1200.jpg --> <div class="wrapper"> <div id="slider"> <img id="1" src="http://www.getupanddosomething.org/wp-content/uploads/2013/11/220.jpg"/> <img id="2" src="http://images2.fanpop.com/image/photos/9400000/Aaaaaawwwwwwwwww-Sweet-puppies-9415255-1600-1200.jpg"/> <img id="3" src="http://offleashk9training.com/dogtrainingblog/wp-content/uploads/2014/04/Sweet-puppy-with-bunny-puppies-14749075-1600-1200.jpg"/> </div> <!-- return false stops it from going to the link "#" --> <a href="#" class="left" onclick="prev(); return false;">Previous</a> <a href="#" class="right" onclick="next(); return false;">Next</a> </div>