Zmiana wielu źródeł obrazu Javascript

Question

Tworzę prostą galerię obrazów i chcę utworzyć wiele zestawów obrazów. Po kliknięciu łącza wszystkie obrazy w zestawie danego linku zostaną zmienione.

Tu jest mój bieżący kod:

<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> 

Na przykład kliknięcie link1 źródeł by wszystko zmienić na setA01.jpg, setA02.jpg i na kliknięcie link2 z souces staną setB01.jpg i tak dalej. Każda pomoc będzie wdzięcznie doceniona.

Answer 1

Jeśli numery zawsze będzie "01, 02, 03, etc" można użyć funkcję tak:

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"; 
    } 
} 

Korzystanie że przeciwko tej listy:

<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> 

stworzyłoby następujące (przyjmując "setA" zostały przekazane jako argument):

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