0

私は2つの主要な「機能」を備えたシンプルなスライドショーを機能させることができました。

  • 次の画像に自動的にスライド

  • 対応するインジケーターをクリックすると、目的の画像が表示されます

間隔は、5秒後に次の画像を表示するように設定されています。ただし、インジケーターをクリックして特定の画像を選択すると、このタイマーをリセットして、次の画像が表示される前に5秒間目的の画像を表示できるようにする必要があります。現在、タイマーはリセットされておらず、画像を非常に短時間しか見ることができない場合があります...これまでのところ、次のようになっています。

$('#keyvisualslides li:first-child').show();
$('#keyvisualpager li:first-child a').addClass('keyvisualactive');


var reload = setInterval(function(){
    // get position of a element
    var mbr_total = $('#keyvisualpager li a').length;
    var mbr_index = $('#keyvisualpager li .keyvisualactive').parent().prevAll().length;
    var mbr_targetkeyvisual = mbr_index + 2;

    if (mbr_targetkeyvisual > mbr_total) {
        mbr_targetkeyvisual = 1;
    }

    // hide current image and show the target image
    $('#keyvisualslides li:visible').hide();        
    $('#keyvisualslides li:nth-child('+mbr_targetkeyvisual+')').show();

    // remove active class from current indicator and add the same class to target indicator
    $('#keyvisualpager li a').removeClass('keyvisualactive');
    $('#keyvisualpager li:nth-child('+mbr_targetkeyvisual+') a').addClass('keyvisualactive');

}, 5000);


$('#keyvisualpager li a').click(function () { 

    var mbr_index = $(this).parent().prevAll().length;
    var mbr_targetkeyvisual = mbr_index + 1;

    $('#keyvisualslides li:visible').hide();        
    $('#keyvisualslides li:nth-child('+mbr_targetkeyvisual+')').show()

    $('#keyvisualpager li a').removeClass('keyvisualactive');
    $('#keyvisualpager li:nth-child('+mbr_targetkeyvisual+') a').addClass('keyvisualactive');

    //          
    // from now on wait 5 seconds until next image is automatically displayed
    // 

});

ところで：私はjquery 1.2.1を使用する必要がありますが、他のバージョンは使用できません。

どうもありがとう

4

1 に答える 1

0 
$('#keyvisualslides li:first-child').show();
$('#keyvisualpager li:first-child a').addClass('keyvisualactive');

function showNextImage(){
    // get position of a element
    var mbr_total = $('#keyvisualpager li a').length;
    var mbr_index = $('#keyvisualpager li .keyvisualactive').parent().prevAll().length;
    var mbr_targetkeyvisual = mbr_index + 2;

    if (mbr_targetkeyvisual > mbr_total) {
        mbr_targetkeyvisual = 1;
    }

    // hide current image and show the target image
    $('#keyvisualslides li:visible').hide();        
    $('#keyvisualslides li:nth-child('+mbr_targetkeyvisual+')').show();

    // remove active class from current indicator and add the same class to target indicator
    $('#keyvisualpager li a').removeClass('keyvisualactive');
    $('#keyvisualpager li:nth-child('+mbr_targetkeyvisual+') a').addClass('keyvisualactive');

}

var reload = setInterval(showNextImage, 5000);


$('#keyvisualpager li a').click(function () { 
    clearInterval(reload);

    var mbr_index = $(this).parent().prevAll().length;
    var mbr_targetkeyvisual = mbr_index + 1;

    $('#keyvisualslides li:visible').hide();        
    $('#keyvisualslides li:nth-child('+mbr_targetkeyvisual+')').show()

    $('#keyvisualpager li a').removeClass('keyvisualactive');
    $('#keyvisualpager li:nth-child('+mbr_targetkeyvisual+') a').addClass('keyvisualactive');

    reload = setInterval(showNextImage, 5000);

});
于 2011-09-23T14:39:06.103 に答える