1

我正在一个投资组合网站上工作，该网站在一个页面上有多个手动幻灯片，这些幻灯片将循环回第一个图像。我现有的代码适用于单个幻灯片/一组图像。我很难在不重复代码的情况下引入额外的幻灯片/图像集。我试图为每个图像集制作一个数组。我的想法是将要使用的特定数组从 HTML 传递给 JS。但我不确定如何在 JS 中指示所需的数组。我对 Javascript 完全陌生，并且对 Python 相当熟悉。在 HTML 和 JS 之间向函数传递值有时让我有些困惑。

HTML：

    <nav id="nav_bar">
<a href="JavaScript:slideshowBack()">PREV</a>
<span>/</span>
<a href="JavaScript:slideshowUp()">NEXT</a>
</nav> 
</header>
<figure id="image">
<img src="http://img.photobucket.com/albums/v486/TimClark123456789/344ca6b8-9f67-4fc9-a745-731870d4f6f2_zps9e1f364a.jpg" name="mypic" border=0>

Javascript：

var num=1
img1 = new Image ()
img1.src = "http://img.photobucket.com/albums/v486/TimClark123456789/344ca6b8-9f67-4fc9-a745-731870d4f6f2_zps9e1f364a.jpg"
img2 = new Image ()
img2.src = "IMG_7431.jpg" 
img3 = new Image ()
img3.src = "IMG_7396.jpg"
img4 = new Image ()
img4.src = "img_4.jpg" 
img5 = new Image () 
img5.src = "img_6.jpg"
img6 = new Image ()
img6.src = "img_7.jpg"

function slideshowUp()
{
num=num+1
if (num==7)
{num=1}
document.mypic.src=eval("img"+num+".src")
}

function slideshowBack()
{
num=num-1
if (num==0)
{num=6}
document.mypic.src=eval("img"+num+".src")
}
4

1 回答 1

0

为什么要重新发明轮子？您会发现很多构建良好、经过实战考验的 javascript 轮播可以解决您担心的问题，而且可能还有很多。一个很好的例子是 Filiament Group 的https://github.com/filamentgroup/responsive-carousel

如果你必须自己写，你可以这样做来优化上面的代码：

var imageArray = [
  'img/src/example.jpg', 
  'image/src/example2.jpg'
  // and so on, not forgetting commas between each, but not after the last one!
  ];
var images = [];

for (var i = 0; i < imageArray.length; i++) {
    images[i] = new Image();
    images[i].src = imageArray[i]
}

现在您正在重用代码。您可以为每个不同的轮播创建不同的图像数组。您还可以通过让它们接受参数来使您的高级命令指向特定的轮播。

于 2013-08-18T21:17:30.670 回答