Javascript 如何分别为每个元素运行jQuery幻灯片功能？

我有一个简单的jQuery幻灯片，可以让我在点击时更改图像（没有上一个/下一个按钮，没有预加载，没有其他，非常简单）。代码仅读取alt文本并将其用作说明。代码工作得很完美，但我不能在同一页上使用两个幻灯片div（我需要两个或更多）。我尝试使用。每个函数，但它不适合我

您能帮我为同一类的任何div独立运行幻灯片放映功能吗？

带有一个幻灯片分区的代码（工作正常）：
带有两个幻灯片div的代码（工作错误）：

$（函数（）{
var currentImage=0；
$（'.slideshow img'）。不是（':first'）。隐藏（0）；
var ImageSconter=$（'.slideshow img'）。长度；
$（'.images counter'）.text（ImageSconter）；
$（'.slideshow_comment'）.text（$（'.slideshow img'）.eq（currentImage.attr（“alt”））；
$（'.slideshow img'）。单击（函数（e）{
e、 预防默认值（）；
$（'.slideshow img'）.eq（currentImage）.hide（0）；
currentImage=currentImage>=$（'.slideshow img'）。长度为1？0:currentImage+1；
$（'.slideshow img'）.eq（currentImage）.show（0）；
$（'.current image counter'）。文本（currentImage+1）；
$（'.slideshow_comment'）.text（$（'.slideshow img'）.eq（currentImage.attr（“alt”））；
}); 
});
1/1

您正在对页面上的相同元素使用一个函数。创建实例

您需要引用单击处理程序中单击的幻灯片，而不是每个幻灯片。我使用

$（this）.slideshow（'.slideshow'）

获取与单击图像最近的父幻灯片

工作版本如下：

JSFiddle：

---

制作一个包含1个参数的函数，该参数表示滑块的id。然后为每个滑块创建一个包装器，并将其ID发送给函数

$(function() {
    nextSlide('slider_wrapper1');
    nextSlide('slider_wrapper2');
});
function nextSlide(id)
{
var currentImage = 0;
id = "#"+id;
    $(id + '.slideshow img').not(':first').hide(0);
    var imagesCounter = $('id + .slideshow img').length;
    $('id + .images-counter').text(imagesCounter);
    $('id + .slideshow_comment').text($('id + .slideshow img').eq(currentImage).attr("alt"));

    $('id + .slideshow img').click(function(e){
        e.preventDefault();
        $('id + .slideshow img').eq(currentImage).hide(0);
        currentImage = currentImage >= $('id + .slideshow img').length-1 ? 0 : currentImage+1;
        $('id + .slideshow img').eq(currentImage).show(0);  
    $('id + .current-image-counter').text(currentImage+1);

    $('id + .slideshow_comment').text($('id + .slideshow img').eq(currentImage).attr("alt"));
    }); 
}

---

嗯，我会试试看，但它在你附加的JSFIDLE链接上不起作用，试着点击图片。第一个例子缺少一些$instance引用。。。现在修复在您的示例中有一些错误（在JSFIDLE上），因为您可以同时看到所有可见的图像，而且我在代码中也尝试了它，但它不能像此示例中的单张幻灯片那样工作：（我对它进行了一点清理，以使它的功能更加明显，并确保一切正常。尝试新链接。答案更新我对它进行了一些重组，使它的功能更加明显。

$(function () {
    $('.slideshow').each(function () {
        // Instance of slideshow
        var $slideshow = $(this);
        // Set count of images in slideshow
        $slideshow.find('.images-counter').text($slideshow.find('img').length);
        // Hide all but first image
        $slideshow.find('img').not(':first').hide(0);
        // Store the current image as data on the slideshow
        $slideshow.data('data-image', 0);
    });

    $('.slideshow img').click(function (e) {
        // Find the parent slideshow
        var $slideshow = $(this).closest('.slideshow');
        // Get the images of that slideshow
        var $images = $slideshow.find('img');
        // Get current image from data - could also get from visibility of image
        var currentImage = $slideshow.data('data-image');
        // Get count of images
        var imagesCounter = $images.length;
        // Hide the current image
        $images.eq(currentImage).hide(0);
        // Increase the counter and wrap at the end
        currentImage = currentImage >= imagesCounter - 1 ? 0 : currentImage + 1;
        // Save the current image number
        $slideshow.data('data-image', currentImage);
        // Show the new image
        $images.eq(currentImage).show(0);
        // Set the text to match the count
        $slideshow.find('.current-image-counter').text(currentImage + 1);
        // Set the text to match the description in the image
        $slideshow.find('.slideshow_comment').text($images.eq(currentImage).attr("alt"));
    });
});

$(function() {
    nextSlide('slider_wrapper1');
    nextSlide('slider_wrapper2');
});
function nextSlide(id)
{
var currentImage = 0;
id = "#"+id;
    $(id + '.slideshow img').not(':first').hide(0);
    var imagesCounter = $('id + .slideshow img').length;
    $('id + .images-counter').text(imagesCounter);
    $('id + .slideshow_comment').text($('id + .slideshow img').eq(currentImage).attr("alt"));

    $('id + .slideshow img').click(function(e){
        e.preventDefault();
        $('id + .slideshow img').eq(currentImage).hide(0);
        currentImage = currentImage >= $('id + .slideshow img').length-1 ? 0 : currentImage+1;
        $('id + .slideshow img').eq(currentImage).show(0);  
    $('id + .current-image-counter').text(currentImage+1);

    $('id + .slideshow_comment').text($('id + .slideshow img').eq(currentImage).attr("alt"));
    }); 
}