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

Question

我有一个简单的 jQuery 幻灯片，它允许我在点击时更改图像（没有上一个/下一个按钮，没有预加载，没有别的，这很简单）。该代码仅读取替代文本并将其用作描述。该代码运行完美，但我不能在同一页面上使用两个幻灯片 div（我需要 2 个或更多）。我尝试使用 .each 函数，但它对我不起作用。

您能帮我为任何具有相同类的 div 独立运行幻灯片功能吗？

带有一个幻灯片 div 的代码（工作正常）：http://jsfiddle.net/6PX22/
带有两个幻灯片 div 的代码（工作错误）：http://jsfiddle.net/6PX22/1/

$(function() {
    var currentImage = 0;

    $('.slideshow img').not(':first').hide(0);
    var imagesCounter = $('.slideshow img').length;
    $('.images-counter').text(imagesCounter);
    $('.slideshow_comment').text($('.slideshow img').eq(currentImage).attr("alt"));

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

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


<div class="slideshow">
    <p><span class="current-image-counter">1</span>/<span class="images-counter">1</span></p>
    <img src="./s images/1.jpg" alt="text 01">
    <img src="./s images/2.jpg" alt="text 2">
    <img src="./s images/3.jpg" alt="text 3">
    <img src="./s images/4.jpg" alt="text 4">
    <img src="./s images/5.jpg" alt="text 5">
    <p class="slideshow_comment"></p>
</div>

Answer 1

您需要在点击处理程序中引用被点击的幻灯片，而不是每个幻灯片。我使用$(this).closest('.slideshow') 来获取最接近单击图像的父幻灯片。

以下工作版本：

JSFiddle：http://jsfiddle.net/TrueBlueAussie/6PX22/6/

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

Answer 2

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

Answer 3

使用 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"));
    }); 
}