Как сделать плавный переход картинок

Избыток сусликов

Есть такой слайдер хочу чтобы он плавно менялся.Конечно вы скажите есть много библиотек пользуйся ими но нет я хочу создать что нибудь свое.(Я начинающий) Заголовок##

var slideIndex = 1;
showDivs(slideIndex);

function plusDivs(n) {
    showDivs(slideIndex += n);
}

function showDivs(n) {
    var i;
    var x = document.getElementsByClassName("mySlides");
    if (n > x.length) {slideIndex = 1} 
    if (n < 1) {slideIndex = x.length} ;
    for (i = 0; i < x.length; i++) {
        x[i].style.display = "none"; 
    }
    x[slideIndex-1].style.display = "block"; 
}
.slideshow { 	/* для того чтобы не влез на враппер**/
	position: relative; 
	z-index: 0;
	background-size: cover;
}

.mySlides {
	width: 100%;
	height: 564px;
	transition: 0.5s;
	
}
.button  {
	z-index: 1;
  padding: 6px 16px;
  background-color: #000;
  text-align: center;
  cursor: pointer;
  border: none;
}
.button:hover {
	opacity: 1;
	background-color: #fff;
}
.display-left {
	opacity: 0.6;
	position: absolute;
  top: 50%;
  right: 1%;
  border-radius: 50%;
  transform: translate(0%,-50%);
  -ms-transform: translate(0%,-50%)
}	
.display-right {
	opacity: 0.6;
	position: absolute;
	top: 50%;
	left: 1%;
	border-radius: 50%;
	transform: translate(0%,-50%);
  -ms-transform: translate(0%,-50%)
}
<div class="slideshow">
					
					
					

					<button class="button display-right" onclick="plusDivs(-1)">❮</button>
  					<button class="button display-left" onclick="plusDivs(1)">❯</button>
			</div>

##

1 ответ

Избыток сусликов

Смена кадров у вас происходит за счет display:block/none. Со стороны css это всегда резкое появление/исчезание, так как элемент либо есть либо нет. Попробуйте осуществить смену кадров за счет прозрачности:

var slideIndex = 1;
showDivs(slideIndex);

function plusDivs(n) {
    showDivs(slideIndex += n);
}

function showDivs(n) {
    var i;
    var x = document.getElementsByClassName("mySlides");
    if (n > x.length) {slideIndex = 1} 
    if (n < 1) {slideIndex = x.length} ;
    for (i = 0; i < x.length; i++) {
        x[i].style.opacity = "0"; 
    }
    x[slideIndex-1].style.opacity = "1"; 
}
.slideshow { 	/* для того чтобы не влез на враппер**/
	position: relative; 
	z-index: 0;
	background-size: cover;
  height: 564px;
}

.mySlides {
	width: 100%;
	height: 564px;
	transition: 0.5s;
	position:absolute;
}
.button  {
	z-index: 1;
  padding: 6px 16px;
  background-color: #000;
  text-align: center;
  cursor: pointer;
  border: none;
}
.button:hover {
	opacity: 1;
	background-color: #fff;
}
.display-left {
	opacity: 0.6;
	position: absolute;
  top: 50%;
  right: 1%;
  border-radius: 50%;
  transform: translate(0%,-50%);
  -ms-transform: translate(0%,-50%)
}	
.display-right {
	opacity: 0.6;
	position: absolute;
	top: 50%;
	left: 1%;
	border-radius: 50%;
	transform: translate(0%,-50%);
  -ms-transform: translate(0%,-50%)
}
<div class="slideshow">
					
					
					

					<button class="button display-right" onclick="plusDivs(-1)">❮</button>
  					<button class="button display-left" onclick="plusDivs(1)">❯</button>
			</div>

Со стороны js, например в jQuery, есть целый набор функций с готовыми анимациями:

.hide()
.show()
.slideUp()
.slideDown()
.slideToggle()
.fadeIn()
.fadeOut()
.fadeTo()
.fadeToggle()

licensed under cc by-sa 3.0 with attribution.