更改多个图像源Javascript

Question

我正在创建一个简单的图像库，并且我想要创建多组图像。点击链接时，链接给定集合中的所有图像都会改变。

这里是我当前的代码：

<ul> 
    <li><img src="image01.jpg" width="500" height="450"></li> 
    <li><img src="image02.jpg" width="200" height="450"></li> 
    <li><img src="image03.jpg" width="530" height="450"></li> 
    <li><img src="image04.jpg" width="500" height="450"></li> 
    <li><img src="image05.jpg" width="178" height="340"></li> 
    <li><img src="image06.jpg" width="400" height="450"></li> 
    <li><img src="image07.jpg" width="300" height="220"></li> 
    <li><img src="image08.jpg" width="400" height="450"></li> 
    <li><img src="image09.jpg" width="500" height="450"></li> 
    <li><img src="image10.jpg" width="400" height="450"></li> 
    <li><img src="image11.jpg" width="300" height="450"></li> 
    <li><img src="image12.jpg" width="300" height="450"></li> 
    <li><img src="image13.jpg" width="178" height="340"></li> 
    <li><img src="image14.jpg" width="500" height="450"></li> 
    <li><img src="image15.jpg" width="200" height="220"></li> 
    <li><img src="image16.jpg" width="100" height="450"></li> 
</ul> 

例如，对LINK1源的点击将全部改为setA01.jpg，setA02.jpg，并就LINK2的souces点击将成为setB01.jpg等。任何帮助将过度感激。

Answer 1

如果您的号码将始终为 “01，02，03，等等”，你可以用一个函数如下所示：

function setBase(baseval) { 
    var images = document.getElementById("mylist").getElementsByTagName("img"); 
    for (var i = 0; i < images.length; i++) { 
    images[i].src = baseval + ((i<9)?0+i:i) + ".jpg"; 
    } 
} 

使用这个列表：

<a href="#" onclick="setBase('setA'); return false;">Set A</a> 
<ul id="mylist"> 
    <li><img src="image01.jpg" /></li> 
    <li><img src="image02.jpg" /></li> 
</ul> 

将创建（假设'setA'作为参数传入）：

<ul id="mylist"> 
    <li><img src="setA01.jpg" /></li> 
    <li><img src="setA02.jpg" /></li> 
</ul>