Question

我正在一个投资组合网站上工作，该网站在一个页面上有多个手动幻灯片，它将循环回到第一个图像。我现有的代码使用单个幻灯片/图像集。我无法在不重复代码的情况下引入额外的幻灯片/图像集。我试图为每个图像集制作一个数组。我的想法是从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")
}

Answer 1

为什么重新发明轮子？你会发现很多非常精心打造的经过实战考验的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]
}

现在你正在重复使用代码。您可以为每个不同的轮播创建不同的图像数组。你也可以通过让他们参与争论来使你的预先命令指向特定的轮播。

在Javascript中重复手动幻灯片

1 个答案: