3

相关的 JavaScript 新手在这里寻找一些帮助来使用 JavaScript/AJAX/HTML 创建可滚动的缩略图滑块。

“可滚动缩略图滑块”是指一组嵌入“左”和“右”箭头图像之间的缩略图。单击任一箭头应更改显示的缩略图集，而无需重新加载/刷新页面的其余部分。例如，请参阅此页面：http ://www.travelzoo.com/local-deals/Boston/Entertainment/34729 ://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 回答