javascript - 直接在 jQuery 幻灯片中定位图像

Question

我喜欢这个脚本的工作方式:http://demo.marcofolio.net/bgimg_slideshow/

不过，我想知道，有没有办法直接定位幻灯片中的每张图片？

因此，我可以单击一个显示“图像 3”的超链接，它会加载特定图像 - 而不是使用当前的导航按钮。

这是脚本本身:http://demo.marcofolio.net/bgimg_slideshow/js/script.js ，但我只需要知道如何在我的 HTML 中直接定位每个图像。

谁能帮我解决这个问题？

非常感谢!!

Answer 1

每张图片不会同时加载到幻灯片中 - 相反，只有一个元素显示每张图片，幻灯片通过更改图片的来源来工作。

但是，如果您只想创建一个链接来自动加载某个图像，您应该能够解决这个问题。图像数据存储在名为“照片”的数组中，因此您应该能够创建一个按钮来触发给定照片的加载。该脚本使用“导航”函数来后退和前进，因此您需要做的就是修改它以允许加载任意照片。

类似这样的东西

var navigate_to = function(image_number) {
  if(animating) {    
    return;    
  }  
  currentImg = image_number;

  var currentContainer = activeContainer;
  if(activeContainer == 1) {
    activeContainer = 2;
  } else {
    activeContainer = 1;
  }
  showImage(photos[currentImg - 1], currentContainer, activeContainer);
};

应该可以，但我还没有测试过——您可能需要稍微修改一下索引才能使其完美运行。然后，您需要做的就是创建一个链接，该链接将使用它指向的索引调用此函数。

为了更具体地说明最后一点，您可以创建这样的元素 -

<div class="navigator">1</div>

然后添加这段代码-

$(".navigator").on("click", function () {
  navigate_to(parseInt($(this).html(), 10));
});

无需专门创建超链接，因为这是页内导航。这将做的是，如果单击具有类“navigator”的元素，元素中的值将被发送到“navigate_to”。只要您将整数放入导航元素中，就应该可以正常工作。