JavaScript >> Javascript 文檔 >  >> jQuery

如何製作自動推進幻燈片

當涉及到幻燈片時,對本網站上提供的教程最需要的改進之一是能夠讓幻燈片自動前進。實際上實現這個效果並不難,為了演示它,在這個簡短的教程中,我們將使用幾行 jQuery 使我們的 HTML5 幻燈片自動前進。

理念

由於我們的幻燈片已經有上一個/下一個箭頭,我們可以讓 JavaScript 函數定期執行並為我們“單擊”下一個箭頭。使用 jQuery,我們可以在 trigger() 的幫助下輕鬆模擬任何元素上的任何事件 方法如下:

$('#nextArrow').bind('click',function(){
    alert("Clicked!");
});

$('#nextArrow').trigger('click');

// or alternatively:
// $('#nextArrow').click();

上面的代碼片段將觸發 click 事件的所有處理程序並輸出警報消息。在幻燈片的情況下,我們不關心幕後發生了什麼,也不關心動畫是如何工作的,我們只是模擬鼠標的點擊。這意味著我們也可以將自動推進腳本作為外部的單獨文件。

結合 setTimeout() JavaScript 函數我們擁有使幻燈片在幻燈片之間自動轉換所需的所有工具。

實現

記住以上幾點,這裡是完整的自動前進代碼。

autoadvance.js

$(window).load(function(){

    // The window.load event guarantees that
    // all the images are loaded before the
    // auto-advance begins.

    var timeOut = null;

    $('#slideshow .arrow').click(function(e,simulated){

        // The simulated parameter is set by the
        // trigger method.

        if(!simulated){

            // A real click occured. Cancel the
            // auto advance animation.

            clearTimeout(timeOut);
        }
    });

    // A self executing named function expression:

    (function autoAdvance(){

        // Simulating a click on the next arrow.
        $('#slideshow .next').trigger('click',[true]);

        // Schedulling a time out in 5 seconds.
        timeOut = setTimeout(autoAdvance,5000);
    })();

});

請注意,我們在第 28 行將一個數組參數傳遞給 trigger 方法。這個數組的元素可以作為 simulated 第 9 行的參數。這有助於我們區分虛假點擊和真實點擊。如果真的發生了,我們會通過清除超時來停止自動前進。

總結

要使用此腳本,您只需替換 next 的選擇器 第 28 行和 both 上的箭頭 第 9 行的箭頭。通過這些修改,您將能夠使用此代碼段來自動化您網站上的任何幻燈片(或任何類型的演示文稿),只需包含 autoadvance.js 帶有腳本標籤。


Tutorial JavaScript 教程
  1. 不要把事情複雜化

  2. 最被低估的前端框架 - PrimeFaces

  3. 邁向通用的高性能排序算法

  4. 如何從前端安全地調用經過身份驗證的 API

  5. 2019 年回顧

  6. 在 JavaScript 面試中勝出:解釋的熱門問題

  7. 訪問外部數據

  1. React 反模式第 3 部分

  2. 如何創建一個簡單的類似 iTunes 的滑塊

  3. Javascript/Jquery 更改類 onclick?

  4. 我如何將 Service Worker 添加到我的網站

  5. 如何刪除 tinyMCE 然後重新添加?

  6. 使用我自己的在線 IDE 實現 Todos 應用程序

  7. 如何清除文檔.write()

  1. NgRx 的最佳實踐:第 2 部分緩存和加載狀態

  2. 10 分鐘內你自己的類似刺激的框架 [第 1 部分]

  3. 在 DevTools 中可視化動畫緩動

  4. [#Beginners] 漸變背景生成器項目⚡