3

ここでは、JavaScript / AJAX/HTMLを使用してスクロール可能なサムネイルスライダーを作成するためのヘルプを探している相対的なJavaScript初心者。

「スクロール可能なサムネイルスライダー」とは、「左」と「右」の矢印画像の間に挟まれたサムネイル画像のセットを意味します。いずれかの矢印をクリックすると、ページの残りの部分を再読み込み/更新せずに表示されるサムネイルのセットが変更されます。例として、次のページを参照してください：http: //www.travelzoo.com/local-deals/Boston/Entertainment/34729。

これまでの私のコードは次のとおりです。

<div id="thumbnails">
  <a href="#" onclick="slideLeft()"><img src="left_arrow.jpg"/></a>
  <script>
    //I only want to display 4 thumbnails at a time, but may have many more cached
    for (var i=0;i<4;i++)
    {
       // don't worry about the formula below, it simply manipulates the imgCounter var
      document.write('<a href=""><img src="sampleImage'+(((parseInt(imgCounter)+i-1)%4)+1)+'.jpg"/></a>');
    } 
  </script>
  <a href="#" onclick="slideRight()"><img src="right_arrow.jpg"/></a>
</div>

<script>
  ...

  function slideLeft() {
    //imgCounter is a passed var, updated when either arrow is clicked
    imgCounter = (parseInt(imgCounter)+3)%4;
    if (imgCounter == 0)
      imgCounter = 4;
    }
  ...
</script>

ユーザーが左矢印または右矢印をクリックすると、最初の画像を表す変数（imgCounter）が更新されます。次に、ページの残りの部分をそのままにして、この更新された変数を使用してDIV（id = "thumbnails"）を再描画します。

これは純粋なJavaScriptで実行できますか？
そうでない場合、誰かが基本的なAJAXの例を提供できますか？

この質問がすでに回答されている（私がチェックした）、または十分に説明されていないと感じた場合は、急いで/トロールしないで、私が提供できる追加情報を丁寧に提案してください。

ありがとう！

4

1 に答える 1

2

わかりました、それで私はこれを自分で理解しました。思った通り、考えすぎていた…

次のように、divのinnerHTMLコードを生成するヘルパー関数を作成しました。

function generateThumbHTML() {
  var html = '';

  for (var i=0;i<4;i++)
  {
    html += '<a href=""><img src="sampleImage';
    html += '(((parseInt(imgCounter)+i-1)%4)+1)';
    html += '.jpg"/></a>';
  }

  return html;
}

次に、slideLeft（）関数とslideRight（）関数の呼び出しを追加し、DIVのinnerHTMLプロパティを新しいHTMLコードに設定しました。

<script>
  ...

  function slideLeft() {
    //imgCounter is a passed var, updated when either arrow is clicked
    imgCounter = (parseInt(imgCounter)+3)%4;
    if (imgCounter == 0)
      imgCounter = 4;

    var container = document.getElementById("thumbnails");
    container.innerHTML = generateThumbHTML();
  }
  ...
</script>

私が答えようとしている唯一の残りの質問はこれです...

innerHTMLプロパティの更新が自動的に開始されるのはなぜですか？このプロパティが更新されるとすぐにバックグラウンドで発生するイベントはありますか？もしそうなら、どのようなイベントが発生しているのかをどうやって知ることができますか？HTML DOM仕様を調べていますが、オブジェクト定義でinnerHTMLプロパティが見つかりません。

于 2012-12-12T20:56:59.100 に答える