0

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

但是，我想知道，有没有办法直接定位幻灯片中的每个图像？

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

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

谁能帮我这个？

非常感谢！！

4

2 回答 2

1

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

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

像这样的东西

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”。只要您将整数放在导航元素中，这应该可以很好地工作。

于 2012-10-29T19:53:50.657 回答
0

您应该能够使用 showImage() 函数更改图像。

showImage(photoObject, currentContainer, activeContainer)
于 2012-10-29T19:44:51.980 回答