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

创建基本的可滚动缩略图滑块而不刷新页面

1 个答案: