Javascript 滑块淡入/淡出

我已经为我的网站创建了这个滑块，但是我需要在go

next/prev

时应用一个

fadeIn/out

。有人能告诉我怎么做或者给我看代码吗

JS

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";
}

var slideIndex=1；
showDivs（slideIndex）；
函数plusDivs（n）{
showDivs（slideIndex+=n）；
}
函数showDivs（n）{
var i；
var x=document.getElementsByClassName（“mySlides”）；
如果（n>x.length）{slideIndex=1}
如果（n<1）{slideIndex=x.length}
对于（i=0；i

HTML

<div class="container">
  <img class="mySlides" src="http://placehold.it/600x200">
  <img class="mySlides" src="http://placehold.it/600x150" style="display:none">
  <img class="mySlides" src="http://placehold.it/600x100" style="display:none">
  <img class="mySlides" src="http://placehold.it/600x200" style="display:none">
    <button onclick="plusDivs(-1)">&#10094;</button>
    <button onclick="plusDivs(1)">&#10095;</button>
</div>

❮
❯

我想你可以替换这个：

for (i = 0; i < x.length; i++) {
  x[i].style.display = "none";   
}
x[slideIndex-1].style.display = "block";

var slideIndex=1；
showDivs（slideIndex）；
函数plusDivs（n）{
showDivs（slideIndex+=n）；
}
函数showDivs（n）{
var i；
var x=document.getElementsByClassName（“mySlides”）；
如果（n>x.length）{slideIndex=1}
如果（n<1）{slideIndex=x.length}
$（'.mySlides:visible'）.fadeOut（函数（）{
$（x[slideIndex-1]）.fadeIn（）；
});
}

❮
❯

我想你可以替换这个：

for (i = 0; i < x.length; i++) {
  x[i].style.display = "none";   
}
x[slideIndex-1].style.display = "block";

var slideIndex=1；
showDivs（slideIndex）；
函数plusDivs（n）{
showDivs（slideIndex+=n）；
}
函数showDivs（n）{
var i；
var x=document.getElementsByClassName（“mySlides”）；
如果（n>x.length）{slideIndex=1}
如果（n<1）{slideIndex=x.length}
$（'.mySlides:visible'）.fadeOut（函数（）{
$（x[slideIndex-1]）.fadeIn（）；
});
}

❮
❯

Argon answer做了一个更好的设计，因为绝对位置移动了我所有的元素。Argon没有触及风格，因为我接受了他的回答，但没有css，一次点击显示第一张幻灯片逐渐变为第二张Argon的回答做了一个更好的设计，正因为如此，绝对位置移动了我所有的元素。Argon没有触及风格，因为我在没有css的情况下接受了他的回答onclick秀第一张幻灯片逐渐变为第二张幻灯片