在同一页面和jQuery上具有相同类的多个幻灯片显示

Question

the below code is html code:

 <div class="slide">
        <button class="next" name="next">Next</button>
    <img src="../pic/09.jpg"/>
    <img src="../pic/429716731_202913.jpg"/>
    <img src="../pic/431701709_3813.jpg"/>
    </div>
    <div class="slide">
        <button class="next" name="next">Next</button>
    <img src="../pic/09.jpg"/>
    <img src="../pic/429716731_202913.jpg"/>
    <img src="../pic/431701709_3813.jpg"/>
    </div>
    <div class="slide">
        <button class="next" name="next">Next</button>
    <img src="../pic/09.jpg"/>
    <img src="../pic/429716731_202913.jpg"/>
    <img src="../pic/431701709_3813.jpg"/>
    </div>

the below code is jquery code:

$(document).ready(function(){
            var slides = $(".slide img");
            slides.hide();
            var len = slides.length;
            var current = 0;
            slides.eq(current).show();
            $(".next").click(function(){
                slides.hide();
                slides.eq(current++).show();
            });
        });

when i click the next just first div is show image not other. i want working for other divs.i want when i click on next on same div just change the image on the same div not all.please help me.

Answer 1

Try something like this. It's a few minor adjustments to what you have:

$(document).ready(function(){
    $(".slide img").hide();
    $(".slide").each(function() {
        $(this).find("img:first").show();
    });  
    $(".next").click(function() {
        var currentImg = $(this).parent().find("img:visible");
        $(currentImg).hide();
        $(currentImg).next("img").show();
    });
});

And here's the working jsFiddle . Hope it helps!

Answer 2

My answer is a little overkill, but if you look at the event listeners for the prev and next, you'll see that they're pretty similar to what you're already doing. Kind of. One word of advice is make sure you capture the "I've gone PAST the next one" scenario, by redisplaying the first.

The rest of my answer is in the interest of completeness. The slide controls are a programmatic element, and thus I removed them from the HTML itself. I take in a div containing a collection of image elements, and I create the slideshow structure around them. Then, after all the slideshow elements have been initialized, I create the event listeners. The advantage to this approach is, I know that I'll have a next and previous button, as I've created them. I'm not relying on someone to make sure they remember to put them into the HTML.

Again, the ONLY sections you really ask about are the event listeners (the $(".nextBtn").on("click", function(){...} part. The rest is just because I'm a perfectionist. Ish. ;)

 $(document).ready(function() { var slideShowEls = $(".slide"); /*** * this function will create all the slideshow * functionality, given a div with a collection * of image elements. ***/ var createSlideShow = function createSlideShow(elements) { // first, we want to initialize the slideshow. // this will mean moving the images into a container, // and adding a div containing the slideshow controls. $(elements).each(function() { // Gather all images in this div. var slideEls = $(this).children("img"); // create two divs: one for controls and one for slides. // The controls div will contain a prev and next button. var slideControls = $("<div>").addClass("slideShowControls"); var prevBtn = $("<button>") .addClass("prevBtn") .text("Prev"); var nextBtn = $("<button>") .addClass("nextBtn") .text("Next"); slideControls.append(prevBtn, [nextBtn]); // The slides div will be the new home of the // slide els from above. var slideContents = $("<div>").addClass("slideContents"); slideEls.detach(); slideContents.append(slideEls); slideEls.hide(); slideEls.first().show(); // both newly created divs are placed in the slideshow container. $(this).append(slideControls, [slideContents]); }) // End .each(), the initialization routine. // Now, we need to create the listeners for the // next and prev clicks. $(".nextBtn").on("click", function() { // We need to get the slides container... var slidePane = $(this).parent().siblings(".slideContents"); // ... hide the visible slide and show the next one. slidePane.find("img:visible").hide() .next().show(); // If no slide is currently showing, there WAS no next one. // Redisplay the first one. if (!slidePane.find("img").is(":visible")) slidePane.children("img").first().show(); }); $(".prevBtn").on("click", function() { // We need to get the slides container... var slidePane = $(this).parent().siblings(".slideContents"); // ... hide the visible slide and show the previous one. slidePane.find("img:visible").hide() .prev().show(); // If no slide is currently showing, there WAS no prev one. // Redisplay the last one. if (!slidePane.find("img").is(":visible")) slidePane.children("img").last().show(); }); } // Run the initialize routine for all slideshow divs. // This will create the slideshow structure and implement and // handle event listeners. createSlideShow(slideShowEls); }); 

 .slide { width: 200px; height: 70px; border: 1px solid black; } .slide img { width: 50px; height: 50px; border: 1px dotted blue; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="slide"> <img src="../pic/09.jpg" /> <img src="../pic/429716731_202913.jpg" /> <img src="../pic/431701709_3813.jpg" /> </div> <div class="slide"> <img src="../pic/09.jpg" /> <img src="../pic/429716731_202913.jpg" /> <img src="../pic/431701709_3813.jpg" /> </div> <div class="slide"> <img src="../pic/09.jpg" /> <img src="../pic/429716731_202913.jpg" /> <img src="../pic/431701709_3813.jpg" /> </div>