Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 28.04.2017, 13:31
Интересующийся
Отправить личное сообщение для Antonjrjr Посмотреть профиль Найти все сообщения от Antonjrjr
 
Регистрация: 13.01.2017
Сообщений: 29

Как сделать плавный переход картинок при нажатии на стрелки
как сделать такую анимацию чтобы при нажатии на стрелки картинки плавно двигались, сейчас просто работает без анимации просто меняются картинки в галереи
<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>
[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]
Ответить с цитированием
  #2 (permalink)  
Старый 28.04.2017, 14:01
Профессор
Отправить личное сообщение для Dilettante_Pro Посмотреть профиль Найти все сообщения от Dilettante_Pro
 
Регистрация: 27.11.2015
Сообщений: 2,899

Таких галерей 100500
Ответить с цитированием
  #3 (permalink)  
Старый 03.05.2017, 09:43
Интересующийся
Отправить личное сообщение для Antonjrjr Посмотреть профиль Найти все сообщения от Antonjrjr
 
Регистрация: 13.01.2017
Сообщений: 29

все предлагают сделать с использованием jquery , а на чистом js нету
Ответить с цитированием
  #4 (permalink)  
Старый 03.05.2017, 10:30
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,118

Сообщение от Antonjrjr
а на чистом js нету
Тебе представляется уникальная возможность реализовать это самостоятельно.
Либо оплатить создание такого скрипта.

Т.о. ты увековечишь свое имя!
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как сделать, чтоб глобус при клике вращался вокруг указателя мышки? missbells Events/DOM/Window 1 05.12.2015 00:48
ipad, как сделать немигающее поле при нажатии Floyd (X)HTML/CSS 0 23.10.2015 12:03
Как сделать так, тобы при нажатии на div содержание текстового документа появлялось? Webtest Общие вопросы Javascript 1 03.09.2014 12:36
Как можно сделать кнопку без ссылки, но с переходом по ссылке при нажатии ? autobuh Элементы интерфейса 10 31.07.2014 05:59
как сделать что бы при открытии страницы сразу открылось большое фото oksanaweb Общие вопросы Javascript 1 05.06.2013 02:17