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

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

单击图像时，img在显示和隐藏之间切换

以下是我使用的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();
        }
    });
});

只需一个幻灯片就可以了，但我希望在同一页上有几个幻灯片，我不知道有多少，所以我无法为我的图像添加唯一的ID。image_news。。。 有没有一种使用$this的方法？我还需要有每个幻灯片独特的计数器，幻灯片是完全独立的。。。单击第一个幻灯片进行导航时，应仅滑动第一个幻灯片

希望有人能帮我，或者有其他的方法

下面是一个JSFIDLE，可以看到它的作用：

---

感谢您的帮助

我不能准确地编写代码，但我可以提供设计思路。我认为你应该以面向对象的方式思考。因为您要使用多个滑块实例。如果我是你，我会做这些来得到你想要的结果

创建一个slider类，其构造函数将“class name”作为参数。例如，在您的情况下，您使用image_news作为类名。对于每个滑块，使用不同的类名。使用此选项后，页面中不同滑块之间的分隔将不再存在问题

完全按照上面的方法定义click方法

---

我可能忘记了一些东西，但是使用这些设计，一页中的多个滑块就没有问题了。

您可以在页面上使用全局变量计数器，然后每次添加新滑块时都向其中添加1。然后将计数器变量的值附加到id名称上。谢谢你的回复@PhillHealey，你能帮我吗？你在同一页上不止一次地使用id，这不是有效的HTML。你需要使用类而不是ID。是的，谢谢@PhillHealey，我知道我按类更改了ID，但这与我的问题无关。。。只是在JSFIDLE中键入代码时出错。。。我读了你的答案和建议，我知道这是正确的做法，但我无法独自实现。。。你能帮我吗？谢谢你的帮助