1

友人にアートワークを見せびらかすための簡単なスライダーを作成しています。私は本当に javascript/jquery にしか慣れていないので、今のところ他のものを 100% 快適に使用できるわけではありません。

私の友人はプログラミングの知識がないので、彼女が更新しやすいように (つまり、新しい画像をフォルダーに追加するたびに新しい画像を自動的に作成するように) 維持しようとしています。彼女は画像をフォルダーにアップロードし、それらに番号を付ける必要があります (つまり、1.jpg、2.jpg)。私の JavaScript は for ループを使用して数値をループし (新しい画像を追加するたびにループを更新する必要があります)、それらをファイル名に挿入します。ただし、これにより、彼女は 1 種類のファイルのみをアップロードするように制限されます。javascriptのみを使用して拡張子を変更する方法はありますか?

これは私がこれまでに持っているものです:

function callImages(){
    //create the image div
    $('.artslider').append('<div class="image"></div>');

    //create the files array
    var files = [];

    //start the loop, starting position will have to be updated as images are added
    for (i=8;i>=0;i--){

        //create the img src for a jpg img
        var imgJPG = 'arts/'+i+'.jpg';

        //find the natural width of the image after it loads to see if it actually exists
        var imgWidth = $('imgJPG').load().naturalWidth;

        //if the width is undefined, replace the jpg extension with gif
        if (imgWidth===undefined){
            var imgGIF = imgJPG.replace('jpg', 'gif');
            files[i] = '<img src="'+imgGIF+'" class="artsliderimg"/>';
        }

        //otherwise keep the jpg extension
        else {
            files[i] = '<img src="'+imgJPG+'" class="artsliderimg"/>';
        }

        //then add the images to the img div
        $('.image').append(files[i]);
    }
};

この if/else の問題は、gif 画像しか作成しないことです。順序を入れ替えると、jpg 画像のみが作成されます。

編集: このコードが生成するものは次のとおりです: https://googledrive.com/host/0B1lNgklCWTGwV1N5cWNlNUJqMzg/index.html

4

1 に答える 1

1

問題は、次のコードにあります。

var imgJPG = 'arts/'+i+'.jpg';
var imgWidth = $('imgJPG').load().naturalWidth;

imgWidth常に未定義になります。

まず、パラメータの代わりに文字列「imgJPG」を渡しますimgJPG。次に、jQuery セレクターを誤解していると思います。これは HTML 要素の選択に使用されます。ここにファイル パスを入力しても、何も達成されません。第三に、関数を誤解していると思いますload。これは、サーバーから HTML 要素にデータをロードするために使用されます。

以下のような関数を使用して、画像が存在するかどうかを確認することをお勧めします。

function urlExists(url) {
  var http = jQuery.ajax({
    type:"HEAD",
    url: url,
    async: false
  });
  return http.status == 200;
}

次に、コードで：

if (!urlExists(imgJPG)){
    var imgGIF = imgJPG.replace('jpg', 'gif');
    files[i] = '<img src="'+imgGIF+'" class="artsliderimg"/>';
}
else {
    files[i] = '<img src="'+imgJPG+'" class="artsliderimg"/>';
}
于 2013-03-15T16:40:46.493 に答える