自動和手動幻燈片

我必須做一個幻燈片，必須自動和手動工作。自動和手動幻燈片

對於手動一部分，我有兩個按鈕：下一個和以前那個讓我看到這些照片，而無需等待的圖像之間的一段時間。

當我不點擊按鈕時，幻燈片將自動顯示並且圖像在六秒鐘後會改變（例如）。

我的問題是，當我點擊一個/下一個按鈕，圖像開始出現較快或出現不止一個屏幕上。

這裏是我一起工作的代碼：

var slideIndex = 1; 
 
showSlides(slideIndex); 
 

 
function plusSlides(n) { 
 
    showSlides(slideIndex += n); 
 
} 
 

 
function showSlides(n) { 
 
    var i; 
 
    var slides = document.getElementsByClassName("hidden"); 
 

 
    if (n===undefined){n= ++slideIndex;} 
 
    if (n > slides.length) {slideIndex = 1;} 
 
    if (n < 1) {slideIndex = slides.length} 
 

 
    $(slides[slideIndex-1]).fadeIn(2000); 
 
    slides[slideIndex-1].style.display = "block"; 
 
    $(slides[slideIndex-1]).delay(3000); 
 
    $(slides[slideIndex-1]).fadeOut(1000); 
 

 
    setTimeout(showSlides, 6000); 
 
}

.hidden { 
 
    display: none; 
 
}

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
    <meta charset="utf-8"> 
 
    <title>jQuery</title> 
 
    <link rel="stylesheet" href="lab5.css" media="screen" title="no title"> 
 
</head> 
 
<body> 
 
    <h1 class="titlu">Goodies</h1> 
 
    <div align="center"> 
 
    <button class="button" onclick="plusSlides(-1)" >Previous</button> 
 
    <button class="button" onclick="plusSlides(1)" >Next</button> 
 
    </div> 
 
    <div class="hidden"> 
 
    <h4 class="num" > 1/5 </h4> 
 
    <img src="http://placehold.it/150x150?text=1"> 
 
    </div> 
 
    <div class="hidden"> 
 
    <h4 class="num"> 2/5 </h4> 
 
    <img src="http://placehold.it/150x150?text=2"> 
 
    </div> 
 
    <div class="hidden"> 
 
    <h4 class="num"> 3/5 </h4> 
 
    <img src="http://placehold.it/150x150?text=3"> 
 
    </div> 
 
    <div class="hidden"> 
 
    <h4 class="num"> 4/5 </h4> 
 
    <img src="http://placehold.it/150x150?text=4"> 
 
    </div> 
 
    <div class="hidden"> 
 
    <h4 class="num"> 5/5 </h4> 
 
    <img src="http://placehold.it/150x150?text=5"> 
 
    </div> 
 
</body> 
 
</html>

是否有辦法後，我每六秒鐘，我可以進行幻燈片放映迴歸其顯示圖像的「速度」點擊上一個/下一個？

另外，如何防止它一次顯示多個圖像？

來源

2016-11-16 user7167081

只是一點點的話：你可以用'如果{...}'，而不是'如果（N ===未定義）{...}'（N！）。它更簡短易讀。 –

@CommercialSuicide，我不會建議 - 特別是在處理數字或任何類型的可能具有假值的類型（例如0，''）時，作爲'！0 === true'。 – JanS

@JanS，當然，如果有人想用'if（！n）{...}'構造，他需要知道**強制**和原語的行爲 –

發生了什麼事是你造成多個計時器被啓動，這會導致你的回調函數往往比它應該運行。

你需要確保你捕獲從您的計時器返回的整數

var timer = null; // Do this in a scope that is accessible to all your relevant functions

...然後：

timer = setTimeout(showSlides, 6000);

這樣就可以取消定時器酌情：

clearTimeout(timer);

你會想要清除你的計時器點擊埠tton，它將停止自動運行，然後你可以啓動一個新的，只留下一個正在運行的計時器。

來源

2016-11-16 17:54:42

謝謝！ :)我還必須補充： 'for（i = 0; i user7167081

-1

這是斯科特建議的計時器的自動和手動幻燈片顯示的工作代碼。它與html和css從這個問題的基礎上如何提問者。 https://www.w3schools.com/howto/howto_js_slideshow.asp

var slideIndex = 1; 
var timer = null; 
showSlides(slideIndex); 

function plusSlides(n) { 
    clearTimeout(timer); 
    showSlides(slideIndex += n); 
} 

function currentSlide(n) { 
    clearTimeout(timer); 
    showSlides(slideIndex = n); 
} 

function showSlides(n) { 
    var i; 
    var slides = document.getElementsByClassName("mySlides"); 
    var dots = document.getElementsByClassName("dot"); 
    if (n==undefined){n = ++slideIndex} 
    if (n > slides.length) {slideIndex = 1} 
    if (n < 1) {slideIndex = slides.length} 
    for (i = 0; i < slides.length; i++) { 
     slides[i].style.display = "none"; 
    } 
    for (i = 0; i < dots.length; i++) { 
     dots[i].className = dots[i].className.replace(" active", ""); 
    } 
    slides[slideIndex-1].style.display = "block"; 
    dots[slideIndex-1].className += " active"; 
    timer = setTimeout(showSlides, 5000); 
}

來源

2017-08-08 14:41:59

自動和手動幻燈片

回答

相關問題