如何使图像点击并转到下一张图像?

时间:2012-02-19 14:12:19

标签: jquery

这是一个示例http://jsfiddle.net/x5mCR/

使用当前代码,如何使大图像点击,它将转到下一个图像?

5 个答案:

答案 0 :(得分:2)

$('#fullimage img').on('click', function() {
    $(".fullimage").hide();
    var next = $(this).next();
    if (next.length > 0) {
        next.fadeIn();    
    } else {
        $('#fullimage img:first').fadeIn();
    }
    return false;
});

Live demo

答案 1 :(得分:1)

$('#fullimage').on('click', 'img', function() {
    var next_img = $(this).next('img');
    if (!next_img.length) {
        next_img = $('#fullimage img.fullimage:first-child').fadeIn();
    }

    $(this).fadeOut(function() {
        next_img.fadeIn();  
    });
});

http://jsfiddle.net/x5mCR/5/

答案 2 :(得分:0)

// Add click action to each fullimage class.
$('.fullimage').click(function() {
    // If there is a next image, hide the current, show the next.
    if ($(this).next().length > 0) {
        $(this).toggle();
        $(this).next().fadeIn();
    }
});

示例:http://jsfiddle.net/x5mCR/2/

答案 3 :(得分:0)

$(".fullimage").on('click', function() {
    $(".fullimage").hide();
    if (!$(this).next().fadeIn().length) // if there's no next image..
        $(".fullimage:first").fadeIn();  // fadein the first one
});

答案 4 :(得分:0)

我将此添加到最后并且工作正常:

$(".fullimage").click(function(){       
    $(this).hide().next().show();           
 });

http://jsfiddle.net/x5mCR/7/