javascript - 创建一个没有页面刷新的基本可滚动缩略图 slider

Question

这里的 JavaScript 新手正在寻找使用 JavaScript/AJAX/HTML 创建可滚动缩略图 slider 的帮助。

“可滚动缩略图 slider ”是指一组楔入“左”和“右”箭头图像之间的缩略图图像。单击任一箭头应更改显示的缩略图集，而无需重新加载/刷新页面的其余部分。作为示例，请参阅此页面: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 示例吗？

如果您觉得这个问题已经得到回答(我检查过)或没有得到充分解释，请不要成为 SCSS /喷子，并礼貌地建议我可以提供哪些额外信息。

谢谢!

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 属性。