<MyRusakov.ru />

PHP и MySQL с Нуля до Гуру 2.0

PHP и MySQL с Нуля до Гуру 2.0

Данный курс научит Вас программировать на самом популярном Web-языке в мире - PHP. Курс состоит из 11 разделов, в которых с нуля рассказывается и показывается процесс написания различных скриптов на PHP.

В курсе Вы узнаете всю необходимую теоретическую часть, а также увидите массу практических примеров, в том числе, и из моей практики.

Почти к каждому уроку идут упражнения.

Просмотрев данный курс, Вы сможете создавать абсолютно любые PHP-сайты любой сложности.

Подробнее
Подписка

Подписавшись по E-mail, Вы будете получать уведомления о новых статьях.

Подписка Подписаться

Добавляйтесь ко мне в друзья ВКонтакте! Отзывы о сайте и обо мне оставляйте в моей группе.

Мой аккаунт Мой аккаунт Моя группа
Опрос

Каким движком Вы предпочитаете пользоваться?

Форум сайта MyRusakov.ru

Плавная смена картинок на чистом js
04.05.2017 12:28:36 Плавная смена картинок на чистом js Сообщение #1
Innovation

Innovation

Новичок

Новичок

Дата регистрации:
04.05.2017 12:10:51

Сообщений: 2

Ребят , есть код галереи с миниатюрами , нужно чтобы при клике на стрелки плавно менялись картинки кажется с помощью css свойства transition.Помогите это реализовать? Собственно код сейчас работает без ошибок, при нажатии на стрелки картинки меняются но без анимации , так же работают миниатюры. 
.arrowleft { 
    position:relative; 
    top:205px; 
    left:-784px; 
    width:3%; 
    float:left; 

.arrowright { 
    position:relative; 
    left:-45px; 
    top:152px; 
    width:3%; 
    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; 
    display: block; 
    margin: 0 auto; 


.image-main__wrapper{ 


.image-main{ 
    float:left; 


.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; 

<html> 
<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> 
</html> 
<js> 
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'
    }; 
})(); 
</js>
Профиль Ответить