Смена картинок при нажатии
Подскажите, пожалуйста, кто знает! В Js не особо разбираюсь!
Задача: Есть картинки - миниатюры.Есть главное изображение , при нажатии на стрелки оно меняется , а также при нажатии на миниатюры главное изображение меняется, при изменение главного изображения миниатюры тоже меняются и сопровождаются Бордером. Как сделать чтобы сопровождалась она не границей , а другой картинкой ? а также чтобы при щелчке по ней мышью она сменилась на другую картинку, а при нажатии на другую картинку вновь стала первоначальной. <ul class="thumbs"> <li class="img1"><img src="Thumbs/1.png" class="mini active" data-full-url="full/1.png" onmouseover="this.src='thumbs/1_over.png'" onmouseout="this.src='thumbs/1.png'" /></li> <li class="img2"><img src="Thumbs/2.png" class="mini" data-full-url="full/2.png" onmouseover="this.src='thumbs/2_over.png'" onmouseout="this.src='thumbs/2.png'"/></li> <li class="img3"><img src="Thumbs/3.png" class="mini" data-full-url="full/3.png" onmouseover="this.src='thumbs/3_over.png'" onmouseout="this.src='thumbs/3.png'"/></li> <li class="img4"><img src="Thumbs/4.png" class="mini" data-full-url="full/4.png" onmouseover="this.src='thumbs/4_over.png'" onmouseout="this.src='thumbs/4.png'"/></li> </ul> </div> var initImgNumber = 0; (function gallery() { var leftArrow = document.getElementById('left_arrow'), rightArrow = document.getElementById('right_arrow'); thumbnails = Array.prototype.slice.call(document.querySelectorAll('.mini')); maxImgNum = thumbnails.length; leftArrow.addEventListener('click', function() { nav(-1); }); rightArrow.addEventListener('click', function() { nav(1); }); for (var i = 0; i < thumbnails.length; i++) { thumbnails[i].addEventListener('click', clickThumb); } })(); function clickThumb(event) { showImage(this.dataset.fullUrl); } function nav(direction) { initImgNumber += direction; if (initImgNumber < 0) { initImgNumber = maxImgNum - 1; } else if (initImgNumber >= maxImgNum) { initImgNumber = 0; } showImage(thumbnails[initImgNumber].getAttribute('data-full-url')); } function showImage(path) { var image = document.getElementById('mainImage'); image.setAttribute('src', path); for (var i = 0; i < maxImgNum; i++) { if (thumbnails[i].getAttribute('data-full-url') != path) { thumbnails[i].classList.remove('active'); } else { thumbnails[i].classList.add('active'); initImgNumber = i; } } } |
Часовой пояс GMT +3, время: 13:54. |