滑塊淡入淡出

我已經爲我的網站創建了此滑塊，但當我去next/prev時，我需要應用fadeIn/out。任何人都可以解釋我如何做到這一點或讓我看看代碼？滑塊淡入淡出

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>

來源

2017-03-23 Riki AA

氬答案做出更好的設計，只爲 –

絕對位置移動我的所有元素。氬沒有觸摸的風格，因爲我接受了他的回答 –

沒有css的onclick顯示第一張幻燈片褪色到第二 –

我認爲你可以取代這個：

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>

來源

2017-03-23 14:31:19 Arg0n

滑塊淡入淡出

回答

相關問題