Question

我有一个画廊网站，可以创建一系列缩略图，然后显示缩略图的更大版本，并每4秒循环一次。我编写了一个单击功能，以便用户可以通过单击缩略图来选择特定图像。大的“显示”图像将立即转换到用户点击的图像，并且计时器将被重置。当我试图实现一个暂停幻灯片放映的功能时，我遇到了一些麻烦，当用户盘旋在“显示”图像上，然后在mouseLeave上重置了计时器。我终于让它工作了，但现在我的点击功能选择一个特定的图像后，用户点击一个链接加载一个不同的图库（总共有五个可供选择）。它适用于页面刷新，但是一旦选择了单独的图库并且拇指加载它就不再有效。下面是我幻灯片的jQuery代码。我想也许我错过了某个地方的代表团，或者我的功能组织不正确。

$(document).ready(function(){

var timer = play()

function play() {
    i = setInterval(advanceImage, 4000);
    return i;
}

function pause() {
    clearInterval(timer)
}

var gallery = drawings;



//Creates array variable based on what user clicks
$('.nav li a').click(function() {
    $('#thumbs').children().remove();
    gallery = window[this.id];
    $.each(gallery, function(index, value){
        $('#thumbs').append('<img src="'+value+'" />');
    });
    return;
});

//Adding images to thumbs
$.each(gallery, function(index, value){
    $('#thumbs').append('<img src="'+value+'" />');
});

//Creates a current image from array
function currentImage(){
    i = jQuery.inArray($('#current-img').attr('src'), gallery);
    return i;
}

//Cycles through array
function advanceImage(){
    currentImage();
    if (i < gallery.length - 1){
        changeImage(i + 1);
    }else{
        changeImage(0)
    }
}

//Change current image to whatever i gives it
function changeImage(i){
    $('#current-img').stop().animate({
        opacity: 0,
    }, 200, function(){
        $('#current-img').attr('src', gallery[i]);
        $('#slideshow-container img').load(function(){
            $('#current-img').stop().animate({
                opacity: 1,
            }, 200)
        })
    })
}

//Clicking thumbnail function
$('#thumbs img').click(function(){
    var newImage = $(this).attr('src');
    $.each(gallery, function(index, value){
        if (value == newImage){
            changeImage(index);
        };
    });
    clearInterval();
});



//Stop rotation on hover
$('#current-img').mouseenter(function() {
    pause();
})
$('#current-img').mouseleave(resetInterval);
    function resetInterval() {
        timer = play();
    }

Answer 1

您正在加载DOM后添加图片。因此，您的点击功能不会附加到您的任何图像（这就是它不起作用的原因）。您需要将事件处理程序附加到文档，以便它处理在DOM加载后创建的图像。

改变这个：

//Clicking thumbnail function
$('#thumbs img').click(function(){
    var newImage = $(this).attr('src');
    $.each(gallery, function(index, value){
        if (value == newImage){
            changeImage(index);
        };
    });
    clearInterval();
});

到此：

//Clicking thumbnail function
$(document).on('click', '#thumbs img', function(){
    var newImage = $(this).attr('src');
    $.each(gallery, function(index, value){
        if (value == newImage){
            changeImage(index);
        };
    });
    clearInterval();
});

Demo 1 - 请注意，在此演示中，您可以通过单击删除添加的图像。

Demo 2 - 请注意，在此演示中，由于使用.click而不是.on，您无法删除添加的图片。

触发其他功能后，单击功能不会触发

1 个答案: