Запуск события по Классу, а не ID
Всем привет!
Есть несколько ссылок на странице. Задача: нужно чтобы при нажатии на любую из них, показывалась следующая картинка. Только вот этот скрипт работает только по ID.
var imagesFoto = ['images/0.jpg','images/1.jpg','images/2.jpg','images/3.jpg','images/4.jpg'];
var i = 1;
var preloadImg = [];
for(var j = 0; j < imagesFoto.length; j++) {
preloadImg[j] = new Image();
preloadImg[j].src = imagesFoto[j];
};
window.onload = afterLoad;
function afterLoad() {
var link1 = document.getElementById('link_1');
if(link1.addEventListener) {
link1.addEventListener('click',clickMouseImg,false);
}
else {
link1.attachEvent('onclick',clickMouseImg);
};
};
function clickMouseImg() {
var img1 = document.getElementById('img_0');
img1.setAttribute('src',imagesFoto[i]);
i++;
if(i == imagesFoto.length) {
i = 0;
};
};
<img id="img_0" src="images/0.jpg"> <a href="link_1" >ссылка1</a> |
webmanss,
так оберните циклом строки 10-16 указав нужные ссылки |
webmanss,
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<script>
var imagesFoto = ['http://www.livegif.ru/Gallery/ALFAV_CH/CHISLA/0.GIF',
'http://www.livegif.ru/Gallery/ALFAV_CH/CHISLA/1-11.GIF',
'http://www.livegif.ru/Gallery/ALFAV_CH/CHISLA/2-10.GIF',
'http://www.livegif.ru/Gallery/ALFAV_CH/CHISLA/3-10.GIF',
'http://www.livegif.ru/Gallery/ALFAV_CH/CHISLA/4-11.GIF'
],
i = 1,
len = imagesFoto.length,
preloadImg = [];
for (var j = 0; j < imagesFoto.length; j++) {
preloadImg[j] = new Image();
preloadImg[j].src = imagesFoto[j];
};
window.onload = afterLoad;
function afterLoad() {
[].forEach.call(document.querySelectorAll('.present'), function(item) {
item.addEventListener('click', clickMouseImg, false);
});
};
function clickMouseImg(event) {
event.preventDefault();
var img1 = document.getElementById('img_0');
img1.src = imagesFoto[i];
i = ++i % len;
};
</script>
</head>
<body>
<img id="img_0" src="http://www.livegif.ru/Gallery/ALFAV_CH/CHISLA/0.GIF">
<br>
<a href="link_1" class="present">ссылка1</a>
<a href="link_1" class="present">ссылка1</a>
<a href="link_1" class="present">ссылка1</a>
</body>
</html>
|
Спасибо Рони огромное!
Всегда выручаешь!!! |
| Часовой пояс GMT +3, время: 17:07. |