Çoklu Resim Kaynaklarını Değiştirin Javascript

Question

Basit bir resim galerisi oluşturuyorum ve birden fazla resim grubu oluşturmak istiyorum. Bir linke tıkladığınızda linkin verilen setindeki tüm görüntüler değişecektir. İşte

benim geçerli kod: Örneğin

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

, kaynakların link1 tıklamasıyla tüm setA01.jpg, setA02.jpg değiştirildi olacağını ve geliştirilmelerine bağlantı2 tıklamasıyla üzerinde olacaktı setB01.jpg vb. Herhangi bir yardım minnetle takdir edilecektir.

Answer 1

Rakamlarınız hep "01, 02, 03, vs" aşağıdaki gibi bir işlev kullanabilirsiniz olacaksa:

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

oluşturmak istiyorsunuz: Bu listedeki karşı kullanma

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şağıdaki ('setA' varsayımı bir argüman olarak alındı):

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