jQuery在同一页面上的多个幻灯片

Question

I'm using a jquery code to display an image slideshow on my website, with a counter.

When clicking on the image, img swicth between show and hide.

here is the jquery code i'm using :

$(document).ready(function () {
    var count = $('.image_news').length;
    $("#total").text(count);
    // set display:none for all members of ".pic" class except the first
    $('.image_news:gt(0)').hide();

    // stores all matches for class="pic"
    var $slides = $('.image_news');

    $slides.click(function () {
        // stores the currently-visible slide
        var $current = $(this);
        if ($current.is($slides.last())) {
            $("#current").text("1");
            $current.hide();
            $slides.first().show();
        }
        // else, hide current slide and show the next one
        else {
            $("#current").text($current.next().index()+1);
            $current.hide().next().show();
        }
    });
});

it works fine with one slideshow, but I would like to have several sildeshow on the same page, and I don't know how many so I can't add a unique ID to my images ('.image_news')... is there a way of doing it using $this ? I need also to have unique counter for each slideshow, and the slideshow to be fully independant... when clicking on first slideshow to navigate, only the first slideshow should slide.

hope someone can help me with this, or maybe there's another way of doing it...

here is a jsfiddle to see it in action :

http://jsfiddle.net/XRpeA/19/

thanks for your help

Answer 1

I can't write the codes exactly but I can give ideas to design it. I think you should think object oriented way. Because you want to use more than one instance of sliders. If I were you, I'd do these to get the results you want.

• Make a slider class whose constructor takes 'class name' as a parameter. For example in your situation, you have used "image_news" for class name. For each of sliders, use different class names. With using this, there will be no longer problem for separation between different sliders in the page.

• Define the click method exactly as above.

I may have forgotten sth but with these design there is no more problem for multiple slider in one page.