Question

我有简单的jQuery幻灯片，允许我在点击时更改图像（没有上一个/下一个按钮，没有预加载，没有别的，它非常简单）。代码只读取alt文本并将其用作描述。代码工作得很完美，但我不能在同一页面上使用两个幻灯片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"));
    }); 
}

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

3 个答案:

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