スライダーフェードイン/フェードアウト

Question

私はこのスライダーを自分のウェブサイト用に作成しましたが、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"; 
} 

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> 

Answer 1

私はあなたがこの置き換えることができると思います。これにより

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

：

を

$('.mySlides:visible').fadeOut(function() { 
    $(x[slideIndex-1]).fadeIn(); 
}); 

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} 
 
    $('.mySlides:visible').fadeOut(function() { 
 
    $(x[slideIndex-1]).fadeIn(); 
 
    }); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<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>