如何在JavaScript中為此圖片庫創建導航代碼？

Question

我正在使用圖片庫代碼，並且嘗試制作一個JavaScript函數，該函數將在設置的時間（在本例中為6秒）后跳轉到另一張幻燈片。 我對如何使其工作感到非常困惑。 以下是圖片庫的HTML代碼。

我試圖創建的功能是導航中onclick的'SetTimeout（jump，6000）。 這樣做的目的是，當用戶單擊“上一個”或“下一個”時，將他們定向到下一張幻燈片，但是6秒鍾后，它們將被發送到另一張幻燈片。

如果有人可以幫助我，我將不勝感激，我一直在尋找一段時間以弄清楚如何做，但我沒有足夠的經驗來解決。

 <ul class="slides"> <div class="page-header" id="page-header"> <!--Begin slide 1 --> <input type="radio" name="radio-btn" id="img-1" checked /> <li class="slide-container"> <div class="slide"> <video id="video1" width="100%" autoplay loop muted > <source src="files/video/1.webm" type="video/webm"> </video> </div> <div class="nav"> <label for="img-3" class="prev" onclick="setTimeout(jump, 6000);"></label> <label for="img-2" class="next" onclick="setTimeout(jump2, 6000);" ></label> </div> </li> <!-- End slide 1 --> <!--Begin slide 2 --> <input type="radio" name="radio-btn" id="img-2" /> <li class="slide-container"> <div class="video-container"> <div class="slide"> <video id="video2" width="100%" muted > <source src="files/video/2.webm" type="video/webm"> </video> </div> </div> <div class="nav"> <label for="img-1" class="prev" onclick="setTimeout(jump3, 6000);"></label> <label for="img-3" class="next" onclick="setTimeout(jump4, 6000);"></label> </div> </li> <!--End slide 2 --> <!--Begin slide 3 --> <input type="radio" name="radio-btn" id="img-3" /> <li class="slide-container"> <div class="video-container"> <div class="slide"> <video id="video3" width="100%" > <source src="files/video/3.webm" type="video/webm"> </video> </div> </div> <div class="nav"> <label for="img-2" class="prev" onclick="setTimeout(jump5, 6000);"></label> <label for="img-1" class="next" onclick="setTimeout(jump6, 6000);"></label> </div> </li> <!--End slide 3 --> </div> </ul> 

Answer 1

您能詳細說明一下跳轉回調的定義嗎？ 同樣，在創建圖片庫時，無需在每張幻燈片上添加導航組件 。 它在圖像滑塊上應該只有一個實例。

我的片段創建簡單的圖像庫：

 <ul class="slide-gallery">
    <li class="slide-container">
        <!-- elements on each slide -->

    </li>
    <li class="slide-container">
        <!-- elements on each slide -->

    </li>
    <li class="slide-container">
        <!-- elements on each slide -->        
    </li> 
</ul>
<!-- use for navigating on each slide -->
<div class="slide-nav">
    <div class="prev"> 
    </div>
    <div class="next"> 
    </div>
</div> 
<!-- also use for navigating -->
<div class="slide-dots">
    <div class="dot">
    </div>
    <div class="dot">
    </div>
    <div class="dot">
    </div>
</div>

您可以使用此代碼段，否則我建議您搜索一些圖片庫或輪播插件。 有各種適合您需求的插件。 根據您要實現的結果，我建議使用owl插件-https: //owlcarousel2.github.io/OwlCarousel2/ 。 您可以使用多種樣式，例如自動播放，響應式圖庫等等。

Answer 2

我建議避免使用內聯JavaScript，以便可以添加更復雜的功能。 考慮以下想法：

• 顯示新圖像時，應設置進入下一個圖像的計時器（間隔）（ setTimeout ）。
• 用戶按下上一個/下一個按鈕時，應清除當前計時器。 要調用clearTimeout ，您需要傳入intervalID ，該setTimeout是從setTimeout返回的。

我會將當前的intervalID存儲在一個變量中，並且建議使用一個帶有參數的函數，而不是六個函數：

var timer;
...
// an example click event handler for a prev/next button
prev1.addEventListener('click', function() {
    clearTimeout(timer);
    displayImage(3);
});
function displayImage(index) {
    // load index image
    var nextIndex = index<3 ? index+1 : 0;
    timer = setTimeout(nextIndex, 6000); // get ready to display next image
}