<MyRusakov.ru />

Создание крупного проекта на Java с нуля

Создание крупного проекта на Java с нуля

Данный курс научит Вас создавать крупные проекты на Java грамотно и быстро. В курсе Вы увидите создание большой и сложной программы на Java абсолютно с нуля.

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

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

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

Подписавшись по 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>
Профиль Ответить