Плавный переход картинок по нажатию на стрелочки

416

04 мая 2017, 12:07

Cоздал галерею изображений имеются 14 картинок , по нажатии на стрелки картинки меняются резко , а как сделать плавный переход

var thumbnails = Array.prototype.slice.call(document.querySelectorAll('.gallery__img')); 
 
function clickOnThumbnail(event) { 
    document.querySelector('.image-main').src = this.dataset.fullUrl; 
} 
 
for (var i = 0; i < thumbnails.length; i++) { 
    thumbnails[i].addEventListener('click', clickOnThumbnail); 
}; 
 
(function arrows(){ 
    var leftArrow = document.getElementById('arrowleft'), 
    rightArrow = document.getElementById('arrowright'), 
    initImgNumber = 1; 
    maxImgNum = 14; 
 
    leftArrow.addEventListener('click', moveBackvard); 
    rightArrow.addEventListener('click', moveForvard); 
 
    function moveBackvard(){ 
        var image = document.getElementById('image-main'); 
        initImgNumber--; 
        if (initImgNumber == 0){initImgNumber = maxImgNum}; 
        image.setAttribute('src', 'images/gallery/big/' + initImgNumber + '.jpg'); 
    }; 
 
    function moveForvard(){ 
        var image = document.getElementById('image-main'); 
        initImgNumber++; 
        if (initImgNumber > maxImgNum){initImgNumber = 1}; 
        image.setAttribute('src', 'images/gallery/big/' + initImgNumber + '.jpg'); 
    }; 
})();

    <div class="content"> 
        <div class="gallery__wrapper"> 
            <div class="image-main__wrapper"> 
                <img class="image-main" src="images/fullsize/1.jpg" id="image-main"> 
                    <div class="arrowleft"><img src="images/left.jpg" id="arrowleft"/></div> 
                    <div class="arrowright"><img src="images/right.jpg" id="arrowright"/></div> 
                <div class="image-thumbnails__wrapper"> 
                    <ul class="thumbnails"> 
                        <li><img id="thumb-1" class="gallery__img" src="images/thumbs/1.jpg" data-full-url="images/fullsize/1.jpg"/></li> 
                        <li><img id="thumb-2" class="gallery__img" src="images/thumbs/2.jpg" data-full-url="images/fullsize/2.jpg"/></li> 
                        <li><img id="thumb-3" class="gallery__img" src="images/thumbs/3.jpg" data-full-url="images/fullsize/3.jpg"/></li> 
                        <li><img id="thumb-4" class="gallery__img" src="images/thumbs/4.jpg" data-full-url="images/fullsize/4.jpg"/></li> 
                        <li><img id="thumb-5" class="gallery__img" src="images/thumbs/5.jpg" data-full-url="images/fullsize/5.jpg"/></li> 
                        <li><img id="thumb-6" class="gallery__img" src="images/thumbs/6.jpg" data-full-url="images/fullsize/6.jpg"/></li> 
                        <li><img id="thumb-7" class="gallery__img" src="images/thumbs/7.jpg" data-full-url="images/fullsize/7.jpg"/></li> 
                        <li><img id="thumb-8" class="gallery__img" src="images/thumbs/8.jpg" data-full-url="images/fullsize/8.jpg"/></li> 
                        <li><img id="thumb-9" class="gallery__img" src="images/thumbs/9.jpg" data-full-url="images/fullsize/9.jpg"/></li> 
                        <li><img id="thumb-10" class="gallery__img" src="images/thumbs/10.jpg" data-full-url="images/fullsize/10.jpg" /></li> 
                        <li><img id="thumb-11" class="gallery__img" src="images/thumbs/11.jpg" data-full-url="images/fullsize/11.jpg"/></li> 
                        <li><img id="thumb-12" class="gallery__img" src="images/thumbs/12.jpg" data-full-url="images/fullsize/12.jpg"/></li> 
                        <li><img id="thumb-13" class="gallery__img" src="images/thumbs/13.jpg" data-full-url="images/fullsize/13.jpg"/></li> 
                        <li><img id="thumb-14" class="gallery__img" src="images/thumbs/14.jpg" data-full-url="images/fullsize/14.jpg"/></li> 
                    </ul> 
                </div> 
            </div> 
        </div>

 .arrowleft {
    position:relative;
    top:205px;
    width:40%;
    float:left;
}
.arrowright {
    position:relative;
    left:711px;
    top:205px;
    width:40%;
    float:right;
}
.arrowleft img{
    width:100%;
}
.arrowright img{
    width:100%;
}
.arrowleft img:hover{
    cursor:pointer;
    width:95%;
}
.arrowleft img:active{
    width:85%;
}
.arrowright img:hover{
    cursor:pointer;
    width:95%;
}
.arrowright img:active{
    width:85%;
}
.gallery__wrapper{
    position: absolute;
    left:200px;
}
.image-main__wrapper{
}
.image-main{
    position: absolute;
    line-height: 0;
}
.image-thumbnails__wrapper{
   width:785px;
    height: 150px;
    position: absolute;
    top:450px;
}
.thumbnails{
    position: absolute;
    float: left;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    margin:0;
    cursor: pointer;
}
.thumbnails img{
    border: 2px solid dimgray;
    margin: 0px 1px 17px!important;
}

Создание интернет-магазина электроники в ABCname

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Vimeo iframe несколько видео не прогружает

Подскажите, по какой причине могут не прогружаться видео с vimeo вставленные как background

249

HTML

Не происходит событие onload если была нажата ссылка

На странице есть ссылка с телефоном в urlПри нажатии на нее в chrome, firefox появляется диалог, позволяющий выбрать приложение для ее открытия (если...

268

HTML