創建基本的可滾動縮略圖滑塊而不刷新頁面

Question

相對JavaScript新手在這里尋找一些使用JavaScript / AJAX / HTML創建可滾動縮略圖滑塊的幫助。

“可滾動的縮略圖滑塊”是指在“左”和“右”箭頭圖像之間楔入的一組縮略圖圖像。 單擊任一箭頭都應該改變顯示的縮略圖集，而不會重新加載/刷新頁面的其余部分。 例如，請參閱此頁： 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 =“縮略圖”），同時保留頁面的其余部分。

這可以用純JavaScript完成嗎？
如果沒有，有人可以提供基本的AJAX示例嗎？

如果你覺得這個問題已經得到解答（我已經檢查過）或者沒有得到充分的解釋，請不要成為一個混蛋/巨魔並且禮貌地建議我可以提供哪些其他信息。

謝謝！

Answer 1

好的，所以我自己想出來了。 我懷疑，我過度思考了......

我編寫了一個幫助函數，為我的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屬性。