Как поменять изображение для нескольких изображений

У меня очень мало знаний о программировании. Я нашел этот замечательный кусочек JavaScript, который позволяет вам щелкнуть мышью на изображении, что заставит его загрузить другое на место и еще один щелчок, чтобы вернуться к исходному изображению, этот бонус также хорошо работает при отображении на сенсорных устройствах. браузер. Я собирался использовать его для показа до и после фотографий. Но код позволяет отображать только одно изображение на экране. Может ли кто-нибудь помочь мне, объяснив или предоставив код, чтобы иметь возможность отображать на странице столько изображений, сколько необходимо, по вертикали, с таким поведением, прикрепленным к каждому. Ваша помощь будет принята с благодарностью.

Вот код:

</body>
</html>
<SCRIPT LANGUAGE=JavaScript>
intImage = 2;
function swapImage() {
switch (intImage) {
 case 1:
   IMG1.src = "http://www.danhero.com/riggs1.jpg"
   intImage = 2
   return(false);
case 2:
   IMG1.src = "http://www.danhero.com/riggs2.jpg"
   intImage = 1
   return(false);
 }
}
</SCRIPT>
</HEAD>
<BODY><center>
<IMG id="IMG1" name="IMG1" src="http://www.danhero.com/riggs1.jpg" 
 onclick="swapImage();">
</BODY>
</HTML>
Источник

1 ответ

Решение
<!doctype html>
<html>
<head>
<style>
#place img {
    display: block;
    margin: 10px 0;
}
</style>
</head>
<body>
<div id="place">
</div>
<script>
var p = document.getElementById('place');
var images = [
    ["http://www.danhero.com/riggs1.jpg", "http://www.danhero.com/riggs2.jpg"],
    ["http://www.danhero.com/riggs1.jpg", "http://www.danhero.com/riggs2.jpg"]
];

function swapImage() {
    var id = +this.id.substring(3);
    if(this.src === images[id][0]) this.src = images[id][1];
    else this.src = images[id][0];
}

for(var i = 0, l = images.length; i < l; ++i) {
    var dt = document.createElement('img');
    dt.setAttribute('id', 'img' + i);
    dt.setAttribute('src', images[i][0]);
    dt.onclick = swapImage;
    p.appendChild(dt);
}
</script>
</body>
</html>

Код работает следующим образом:

Во время загрузки страницы пустой div с идентификатором "place" заполняется изображениями из массива "images".

Эта переменная является массивом с двумя ссылками на изображение, первая будет отображаться, а вторая используется для обмена изображениями. Счетчик отсутствует, изображение проверяется на его источник (src), и если оно совпадает с первым элементом в массиве, то оно заменяет изображение на второе и наоборот.

Изображения имеют id = "img" + i, где i - счетчик (img0, img1, img2 и т. Д.).

На сенсорных экранах я не проверял, но это должно относиться к событию нажатия, которое поддерживается даже на iPhone с сенсорными событиями.

Источник
Другие вопросы по тегам