0

PHOTOSHOPで画像を1つの「セット」に積み重ねて、その画像にjQueryまたはjavascriptを適用して、クリックしたときに積み重ねられた各画像を表示できるようにする方法はありますか。

それぞれ 5 つの画像を含む 150 のフォルダーとして、セットの 5 つの画像のそれぞれを通過するスタックとして表示するプログラムを作成しています。次に「次へ」をクリックすると、フォルダ 2 が読み込まれ、画像をクリックしてその 5 つのセットを順に進むことができます...

OK、もっと具体的にする必要があります。これが私のインデックスページです：

 <html>
 <head>
<title>index</title>
 </head>
 <body>

 <img src="1.jpg" id="displayimage" alt="" onmousedown="change()">

  <script src="scripts.js"></script>
</body>
</html>

ここに私のJavaScriptがあります:

 imgs=Array("1.jpg", "2.jpg", "3.jpg", "4.jpg", "5.jpg", "6.jpg", "7.jpg", "8.jpg",   "9.jpg", "10.jpg", "11.jpg", "12.jpg", "13.jpg", "14.jpg", "15.jpg", "16.jpg", "17.jpg", "18.jpg", "19.jpg", "20.jpg", "21.jpg", "22.jpg", "23.jpg", "24.jpg");
 var x=0;

 function change() {
 document.getElementById("displayimage").setAttribute("src", imgs[++x]);

if (x==23) {
x=0;
 }
 }

画像をクリックすると、次の画像が表示されます。

問題は、src を動的にする必要があることです。これは、インデックス ページと同じディレクトリ内のすべての画像で正常に機能しますが、images1、images2、images3 ..... という名前の 50 個のフォルダーがあり、各フォルダーには 1.jpg、2.jpg、3.jpg などがあります。など JS の src を拡張子 images1/imgs[++x] に変更する方法はありますか? また、「1」を動的にする方法はありますか?

ありがとう

4

1 に答える 1

0

画像を積み重ねる前に、プログラムから各画像の幅を渡す必要があります。

folder1/galleryData.txt:

img1.jpg|340
img2.jpg|220
img3.jpg|540
img4.jpg|628
img5.jpg|342

あなたが幅を読むことができるよりも：

var widths = []; // Array to store read widths

$.get('folder1/galleryData.txt', function(data) {

     var line = data.split('\n');
     for(var i=0; i<line.length; i++){
         widths.push( line.split('|')[1] );
     }
     alert( widths ); // 340,220,540,628,342 

});

これで、配列の幅には、次のようにアクセス可能なすべての積み重ねられた画像の幅が含まれます

widths[2]; // 540

カウンター [n] を使用して、ボタンをクリックして目的の画像を取得し、要素をアニメーション化することができます - jQuery を使用したbackgroundPosition 。

すべての画像の幅が同じである場合...まあ、仕事はさらに簡単ですが、注釈を作成する必要はありません。すべての画像を積み重ねて、backgroundPositionアニメーションを実行するだけです。

于 2013-08-04T17:11:39.923 に答える