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

У меня очень мало знаний о программировании. Я нашел этот большой бит 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>

источник

2014-02-15 user3313868

<!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 с идентификатором «место» заполняется с изображениями из массива «образов» ,

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

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

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

источник

2014-02-15 18:24:47 Evil

Hi EvilJS, возможно, используя этот раздел комментариев неправильно, но хотел сказать огромное спасибо за такой удивительно быстрый ответ и отличный ответ. Это сделало работу так, как я хотел, и я очень ценю вашу помощь. Cheers – user3313868

Еще одна вещь, как я могу добавить разрыв между отображаемыми изображениями? Большое спасибо. – user3313868

Я добавил поле в разделе стиля - 10px 0 означает, что он имеет вертикальный 10px margin и 0 по горизонтали. Cheers;) – Evil

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

ответ

Смежные вопросы