如何製作自動推進幻燈片
當涉及到幻燈片時,對本網站上提供的教程最需要的改進之一是能夠讓幻燈片自動前進。實際上實現這個效果並不難,為了演示它,在這個簡短的教程中,我們將使用幾行 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 帶有腳本標籤。
上一篇
將 jQuery 代碼轉換為插件