Изменить несколько источников изображений Javascript - PullRequest
Новая
       19

Изменить несколько источников изображений Javascript

5 голосов
/ 29 января 2010

Я создаю простую галерею изображений, и я хотел бы создать несколько наборов изображений. При нажатии на ссылку все изображения в заданном наборе ссылок изменятся.

Вот мой текущий код: 

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

Например, при нажатии ссылки 1 все источники будут изменены на setA01.jpg, setA02.jpg, а при нажатии ссылки 2 источники станут setB01.jpg и т. Д. Любая помощь будет с благодарностью.

1 Ответ

2 голосов
/ 29 января 2010

Если ваши номера всегда будут «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>
...