0

このスクリプトの動作が気に入っています: http://demo.marcofolio.net/bgimg_slideshow/

しかし、スライドショーの各画像を直接ターゲットにする方法はありますか?

したがって、「画像 3」というハイパーリンクをクリックすると、現在のナビゲーション ボタンを使用するのではなく、特定の画像が読み込まれます。

これはスクリプト自体です: http://demo.marcofolio.net/bgimg_slideshow/js/script.jsですが、HTML で各画像を直接ターゲットにする方法を知る必要があります。

誰でもこれで私を助けることができますか？

どうもありがとう！！

4

2 に答える 2

1

各画像はスライドショーに同時に読み込まれるのではなく、各画像を表示する単一の要素があり、スライドショーは画像のソースを変更することで機能します。

ただし、特定の画像を自動的にロードするためのリンクを作成するだけの場合は、これを回避できるはずです。画像データは「photos」という名前の配列に保存されるため、特定の写真の読み込みをトリガーするボタンを作成できるはずです。このスクリプトは「ナビゲート」機能を使用して前後に移動するため、任意の写真をロードできるように変更する必要があります。

このようなもの

var navigate_to = function(image_number) {
  if(animating) {    
    return;    
  }  
  currentImg = image_number;

  var currentContainer = activeContainer;
  if(activeContainer == 1) {
    activeContainer = 2;
  } else {
    activeContainer = 1;
  }
  showImage(photos[currentImg - 1], currentContainer, activeContainer);
};

動作するはずですが、テストしていません。完全に動作させるには、インデックスを少しマッサージする必要があるかもしれません。次に、指しているインデックスを使用してこの関数を呼び出すリンクを作成するだけです。

この最後の点をより具体的にするために、次のような要素を作成できます -

<div class="navigator">1</div>

次に、このコードを追加します-

$(".navigator").on("click", function () {
  navigate_to(parseInt($(this).html(), 10));
});

これはページ内ナビゲーションであるため、特にハイパーリンクを作成する必要はありません。これにより、「navigator」クラスの要素をクリックすると、要素の値が「navigate_to」に送信されます。ナビゲート要素に整数を入れる限り、これで十分に機能するはずです。

于 2012-10-29T19:53:50.657 に答える
0

showImage（）関数を使用して画像を変更できるはずです。

showImage(photoObject, currentContainer, activeContainer)
于 2012-10-29T19:44:51.980 に答える