0

画像をクリックすると次の画像に変わる簡単なスライドショーを作成しようとしています。これまでのところ、1-4 という名前のサブフォルダーに 4 つの画像があります (例: 1.jpg、2.jpg、3.jpg、4.jpg)。4 より大きい場合は 1 にリセットされるように、カウンター (変数 imgcounter) を設定しました。このカウンターを使用して、img 要素の src 名を簡単に変更します。

シンプルなバージョン:

$(document).ready(function() {
var imgcounter = 1; 
$('#slide img').each(function() {
    $(this).click(function() {
        if(imgcounter <= 4 ) {
            imgcounter++;
            $(this).attr('src', 'images/' + imgcounter + '.JPG');
        } // end if
        else {
            var imgcounter = 1;
            $(this).attr('src', 'images/' + imgcounter + '.JPG');
        } // end else
    }); // end click    
}); // end each
});  // end ready

このバージョンでは、クリックしても画像は変わりません。

ソースを置き換えるものを定義する変数を配置する、このより複雑な方法も試しました。特に、src 全体を置き換えることを示すために二重アポストロフィ '' を使用した部分で、replace() 関数を正しく使用しているかどうかはわかりません。また、replace() 関数の 2 番目の部分 ('images/' + imgcounter + '.JPG') を正当に書き出したかどうかもわかりません。

$(document).ready(function() {
var imgcounter = 1; 
$('#slide img').each(function() {
    var imgFile = $(this).attr('src');
    var preloadImg = new Image();
    $(this).click(function() {
        if(imgcounter <= 4 ) {
            imgcounter++;
            preloadImg.src = imgFile.replace('', 'images/' + imgcounter + '.JPG');
            $(this).attr('src', preloadImg.src);
        } // end if
        else {
            var imgcounter = 1;
            preloadImg.src = imgFile.replace('', 'images/' + imgcounter + '.JPG');
            $(this).attr('src', preloadImg.src);
        } // end else
    }); // end click    
}); // end each
});  // end ready

このバージョンでは画像が変更されましたが、壊れた画像シンボルが表示され、エラー コンソールに次のように表示されます。ソース全体を置き換えることができない理由がわかりません。代わりに、最後にソース名のコピーを追加するだけのようです...

事前に助けてくれてありがとう！

4

1 に答える 1

2

私は次のようなことをします：

var imgcounter = 1;

$("#slide img").click(function(e){
    if(imgcounter < 4){
        imgcounter++;
    }else{
        imgcounter = 1;
    }
    $(this).attr("src", "images/"+imgcounter+".jpg");
});

imgとにかく内部のそれぞれにハンドラーを追加する#slideので、関数は必要なく、each()見た目もすっきりしています。また、への冗長な呼び出しを削除しました$(this).attr()。

于 2012-07-16T01:33:26.783 に答える