如何編寫jquery外掛之輪播圖
阿新 • • 發佈：2019-01-29
對於一位合格的前端開發人員來說，首頁圖片輪播可謂是必會的基本功。那麼我們聊一聊如何用jquery封裝自己的輪播外掛。
首先必須要聊到的jquery為我們提供的兩大擴充套件方法，$.fn和$.extend(),$.extend相當於為jQuery類（注意，JavaScript並沒有類，我們只是以類來理解這種做法）新增靜態方法，
$.fn其實就是jQuery.prototype，原型，對於新手比較難解的概念，可以簡單的理解為，我更改了印章，印章印出來的每個印記都會受到印章的影響，可謂釜底抽薪，JavaScript原型鏈相對較為複雜，JavaScript的繼承特性便是基於原型實現的，在編寫大規模的JavaScript程式碼的時候，以面向物件的方式編寫才會顯得有價值，我們在此不贅述。
好了，我們有了上述的知識儲備，我們開始編寫輪播外掛。
這是HTML程式碼的結構，需要一個向左，一個向右按鈕和對應輪播圖片數目的icon按鈕，建議大家用a標籤設定圖片的容器，比較好操作。<!DOCTYPE html> <html lang="en"> <head> <title></title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="main.css" rel="stylesheet"> <script src="./js/jquery-1.10.2.min.js"></script> <script src="./js/jquery.slider.js"></script> <script src="./js/main.js"></script> </head> <body> <div class="slider"> <div class="slider_img"> <a class="slider-active" href="#" style="background: url(./img/nav1.jpg) 50% no-repeat; background-size: cover; opacity: 1;"></a> <a href="#" style="background: url(./img/nav2.jpg) 50% no-repeat; background-size: cover;"></a> <a href="#" style="background: url(./img/nav3.jpg) 50% no-repeat; background-size: cover;"></a> <a href="#" style="background: url(./img/nav4.jpg) 50% no-repeat; background-size: cover;"></a> <a href="#" style="background: url(./img/nav5.jpg) 50% no-repeat; background-size: cover;"></a> </div> <span id="left" class="arrow-icon"><<</span> <span id="right" class="arrow-icon">>></span> <div class="slider_icon"> <span class="active"></span> <span></span> <span></span> <span></span> <span></span> </div> </div> </body> </html>
CSS我就不貼了，之後我會將其上傳。
最重要的是JavaScript程式碼:
(function($) { $.fn.slider = function(options) { //this指向當前的選擇器 var config = { index: 0, timer: null, speed: 3000, min: 0.3, //和css中的樣式對應 max: 1 }; var opts = $.extend(config, options); //核心方法，把當前index的圖片和icon顯示，把除此之外的圖片和icon隱藏 var core = function() { if (opts.index > 4) { opts.index = 0; } else if (opts.index < 0) { opts.index = 4; } $(".slider_icon span").eq(opts.index).addClass("active").siblings("span").removeClass("active"); $(".slider_img a").eq(opts.index).css("display", "block").stop().animate({ "opacity": opts.max }, 1000).siblings("a").css({ "display": "none", "opacity": opts.min }); }; //左邊 $(this).find("#left").bind("click", function() { --opts.index; core(); }); //右邊 $(this).find("#right").bind("click", function() { ++opts.index; core(); }); //每個icon分配事件 $(this).find(".slider_icon").on("click", "span", function() { var index = $(this).index(); opts.index = index; core(); }); //定時器 var start = function() { opts.timer = setInterval(function() { ++opts.index; core(); }, opts.speed); } $(this).hover(function() { clearInterval(opts.timer); }, function() { start(); }); start(); } }(jQuery));
1:core方法，其實圖片輪播的本質就是把當前索引的圖片顯示，導航icon高亮，其餘的隱藏，我做的是淡入淡出。
2：向左，向右，導航其實無非就是index的改變，jquery提供了一個index()方法，可以獲得所有匹配元素中當前元素的索引，從0開始。
3：定時器，要實現圖片的自動導航，無非就是每隔一定的時間，index+1。另外，當滑鼠放入的時候，要清楚定時器，當輸入移出的時候，再開啟定時器。
以上三點就是輪播的核心要點，任何輪播圖都不會脫離這個程式設計模式。
最後，小的奉上自己的輪播外掛，忘大神輕噴。