Question

我正在使用jquery代码在我的网站上显示带有计数器的图片幻灯片。

点击图片时，img在show和hide之间切换。

这是我正在使用的jquery代码：

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

它可以在一个幻灯片中正常工作，但我希望在同一页面上有几个sildeshow，我不知道有多少，所以我无法为我的图像添加一个唯一的ID（'。image_news'）。 .. 有没有办法使用$ this？我还需要为每个幻灯片显示唯一的计数器，并且幻灯片显示完全独立...当点击第一张幻灯片进行导航时，只有第一张幻灯片应该滑动。

希望有人可以帮助我解决这个问题，或者可能还有其他方法可以帮助我......

这是一个jsfiddle，可以看到它的实际效果：

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

感谢您的帮助

Answer 1

我无法准确地编写代码，但我可以提出设计它的想法。我认为你应该考虑面向对象的方式。因为您想使用多个滑块实例。如果我是你，我会这样做以获得你想要的结果。

创建一个滑块类，其构造函数采用＆＃39;类名称＆＃39;作为参数。例如，在您的情况下，您使用了＆＃34; image_news＆＃34;对于班级名称。对于每个滑块，请使用不同的类名。使用此功能后，页面中不同滑块之间的分离将不再存在问题。
完全按照上述方式定义点击方法。

我可能已经忘记了......但是通过这些设计，一页中的多个滑块不再存在问题。

在同一页面上jquery多个幻灯片

1 个答案: