<MyRusakov.ru />

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

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

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

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

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

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

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

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

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

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

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

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

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

Плавная смена картинок
04.05.2017 12:15:38 Плавная смена картинок Сообщение #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>
Профиль Ответить
20.08.2017 23:42:12 Плавная смена картинок Сообщение #2
Gorbunko

Gorbunko

Модератор

Модератор

Дата регистрации:
22.06.2014 21:07:00

Сообщений: 8

Если Вам нужен слайдер, то это может помочь:

1.https://myrusakov.ru/css3-slider-without-javascript.html
2. https://myrusakov.ru/jquery-slider.html
3. https://myrusakov.ru/jquery-beautiful-and-showy-sliders.html
4. https://myrusakov.ru/slick-slider-jquery.html
5. https://myrusakov.ru/css3-slideup-blocks.html
6. https://myrusakov.ru/javascript-slide-image.html
Профиль Ответить