0

サムネイルの文字列を作成し、サムネイルのより大きなバージョンを表示し、4 秒ごとに次のサイクルに切り替えるギャラリー サイトがあります。ユーザーがサムネイルをクリックして特定の画像を選択できるように、クリック関数を作成しました。大きな「表示」画像は、ユーザーがクリックした画像にすぐに移行し、タイマーがリセットされます。ユーザーが「表示」画像にカーソルを合わせている間にスライドショーを一時停止し、mouseLeave でタイマーをリセットする機能を実装しようとしたときに、問題が発生しました。最終的に機能するようになりましたが、ユーザーがリンクをクリックして別のギャラリーをロードした後、特定の画像を選択するためのクリック機能が機能しなくなりました (合計で 5 つから選択できます)。ページの更新時に機能しますが、別のギャラリーが選択されてサムが読み込まれると機能しなくなります。以下は、スライドショー用の 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();
    }
4

1 に答える 1

0

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

デモ 1 - このデモでは、追加した画像をクリックして削除できることに注意してください。

デモ 2.click - このデモでは、 の代わりにを使用しているため、追加した画像を削除できないことに注意してください.on。

于 2013-09-13T20:01:07.940 に答える