Замена картинки

helper13

Скажите как можно реализовать замену картинки, каждый раз кликая по ней, как на http://tema.ru/travel/piteretnoexp-1/ (где квадратики там можно менять картинки) Заранее благодарен
4 ответа

helper13

Скажите как можно реализовать замену картинки, каждый раз кликая по ней
(function () {
 
    var images = ['./image1.jpg', './image2.jpg', './image3.jpg', './image4.jpg', './image5.jpg'],
    i = 0;
    
    $('img').click(function (e) {
        i < images.length-1 ? i++ : i--;
        $(this).attr('src', images[i]);
    });
 
}());


helper13

А не работает, выводит, то что написали


helper13

На том сайте замена не по клику на картинке, а по клику на элемент Если по-простому, то сделать можно, например, таким образом: обычный тег , какие-то элементы (например, список), которые позиционируете куда вам там надо, и просто по нажатию меняете атрибут.
<img id="bigImg" src="http://gsm2015.ru/wp-content/uploads/2013/07/IMG_2013_21.jpg">
<ul id="icons">
    <li attr-src="http://gsm2015.ru/wp-content/uploads/2013/07/IMG_2013_21.jpg" onclick="changeSrc(this)"></li>
    <li attr-src="http://photos.eppo.org/albums/EPPO_Meetings/Meetings_2007/Workshop_inspectors_Plovdiv/IMG_3541.JPG" onclick="changeSrc(this)"></li>
    <li attr-src="http://upload.wikimedia.org/wikipedia/commons/a/af/Bonsai_IMG_6426.jpg" onclick="changeSrc(this)"></li>
</ul>
img {
    width:300px;
    height:300px;
}
ul#icons {
    display: inline-block;
    width:30px;
    position: absolute;
    left:250px;
    top: 0;
    list-style-type: none
}
ul#icons li {
    width: 10px;
    height:10px;
    border: 1px solid red;
    margin-bottom: 10px;
    cursor: pointer
}
var im = document.getElementById("bigImg")
function changeSrc(elem)
{
    im.src = elem.getAttribute("attr-src")
}
Вживую


helper13

А как сделать так, что и при нажатии на картинку (не только на область), тоже была смена?