jQuery輪播圖插件 · 致力于web前端技術撰寫

下面是我周末寫得一個jQuery的輪播插件，這是一個經常會用到的功能，首次開發插件，有什么不足之處，請大家指正。此插件可以傳遞參數，只是沒有提供修改默認參數值的方法，后期會繼續改進。打算再繼續開發jQuery手風琴和放大鏡效果的插件。 ### jquery輪播圖插件 ~~~ /** * * @authors Yvette Lau * @date 2015-11-1 16:26:27 * @version $1.0$ * **/ (function($){ $.carousel = { carousel: function(_obj, _srcArray, _options){ /*默認樣式*/ var defaults = { "div": { "width": "1000px", "height": "400px", "position": "relative", "cursor": "pointer" }, "img": { "width": _obj.css("width"), "height": _obj.css("height"), "display":"none" }, "ul": { "list-style" : "none", "position": "absolute", "bottom": "20px", "margin": "0px", "padding": "0px 0px" }, "li":{ "float": "left", "width": "10px", "height": "10px", "border": "2px solid #FFFFFF", "border-radius": "10px", "padding": "0px 0px", "margin-left": "10px" }, "indexClick":{ "backgroundColor": "#FFFFFF" }, "a":{ "width": "60px", "text-align": "center", "font-size": "30px", "font-weight": "normal", "font-family": "Microsoft Yahei", "text-decoration": "none", "color": "#000000", "height": parseInt(_obj.css("height"))/5 + "px", "position": "absolute", "top": 2 * parseInt(_obj.css("height"))/5 + "px", "line-height": parseInt(_obj.css("height"))/5 + "px", "display": "none", "cursor": "pointer", "user-select": "none", "opacity": 0.7 }, "nextPicture": { "background": "#FFFFFF", "background-repear": "no-repeat", "background-size": "cover", "right": "20px" }, "prePicture": { "background": "#FFFFFF", "background-repear": "no-repeat", "background-size": "cover", "left": "20px" }, "interval":{ "period" : 2000 } }; /*如果傳遞參數*/ if(_options){ for(var i in defaults){ $.extend(defaults[i], _options[i]); } } $.carousel.initCarousel(_obj, _srcArray, defaults); //初始化輪播div的樣式 $.carousel.insertImage(_obj,_srcArray, defaults); //插入圖片，并設置樣式 $.carousel.insertIndex(_obj,_srcArray, defaults); //插入index,并設置樣式 $.carousel.insertButtons(_obj,_srcArray, defaults); //插入上一張、下一張按鈕，并設置樣式 $.carousel.loopImages(_obj, _srcArray, defaults); //設置定時器循環播放 }, /********************************************************** * 初始化div的樣式 * ***********************************************************/ initCarousel: function(_obj, _src, _defaults){ var _default = _defaults.div;//默認的div寬高及定位 _default.width = _obj.css("width") || _default.width; _default.height = _obj.css("height") || _default.height; /*設置div的定位*/ _default.position = _obj.css("position") == "static" ? _default.position : _obj.css("position"); $.carousel.setCss(_obj, _default); /*鼠標移入div,和移出div*/ _obj.hover(function(){ $(this).find("a").css({"display": "block"}); clearInterval(window.carouselTimer); },function(){ $(this).find("a").css({"display": "none"}); $.carousel.loopImages(_obj, _src, _defaults); //setInterval(window.carouselTimer); }) }, /********************************************************** * 插入圖片 * ***********************************************************/ insertImage: function(_obj, _imgsrc, _defaults){ for(var i = 0; i < _imgsrc.length; i++){ var $img = $("<img>"); $img.attr({"idnex":i}); $img.attr({"src":_imgsrc[i]}).appendTo(_obj); } $.carousel.initImgStyle(_obj,_defaults);//初始化圖片樣式 }, /********************************************************** * 初始化圖片樣式 * ***********************************************************/ initImgStyle: function(_obj, _defaults){ var $images = _obj.find("img"); $.carousel.setCss($images, _defaults.img); $.carousel.setCss($images.eq(0),{"display":"block"});/*顯示第一張圖片*/ }, /********************************************************** * 插入ul li * ***********************************************************/ insertIndex: function(_obj, _imgsrc, _defaults){ var $ul = $("<ul>"); $ul.attr("id","carouselIndex");/*給ul加上id = "index"的屬性*/ $ul.appendTo(_obj); for(var i = 0; i < _imgsrc.length; i++){ var $li = $("<li>"); $li.appendTo($("#carousel ul")); } $.carousel.initIndexStyle(_obj,_imgsrc, _defaults); }, /********************************************************** * 初始化index的樣式 * ***********************************************************/ initIndexStyle: function (_obj, _imgsrc, _defaults){ /*ul定位*/ $.carousel.setCss($("#carouselIndex"), _defaults.ul); /*li的樣式*/ $.carousel.setCss($("#carouselIndex li"), _defaults.li); /*設置圓圈水平方向居中*/ var _ulWidth = $("#carouselIndex").width(); var _carouselWidth = _obj.width(); var _left = (_carouselWidth - _ulWidth)/2; $.carousel.setCss($("#carouselIndex"),{"margin-left":_left}); /*設置第一個的圓圈被選中*/ $.carousel.setCss($("#carouselIndex li").eq(0),{"background-color": _defaults.indexClick.backgroundColor}); /*綁定點擊事件*/ $("#carouselIndex li").click(function(){ $.carousel.indexClick($(this).index(), _obj, _imgsrc, _defaults); }); }, /********************************************************** * 插入上一張、下一張按鈕 * ***********************************************************/ insertButtons: function(_obj, _imgsrc, _defaults){ var _next = $("<a>"); var _pre = $("<a>"); var reg = /^url/; /*按鈕的背景不為圖片時*/ if(!reg.test(_defaults.nextPicture.background)){ _next.text(">"); } if(!reg.test(_defaults.prePicture.background)){ _pre.text("<"); } _next.attr({"id":"nextPicture"}); _pre.attr({"id":"prePicture"}); _next.appendTo(_obj); _pre.appendTo(_obj); $.carousel.initButtonstyle(_obj, _next, _pre, _imgsrc, _defaults); }, /********************************************************** * 初始化上一張、下一張按鈕樣式 * ***********************************************************/ initButtonstyle: function (_obj, _next, _pre, _imgsrc, _defaults){ /*設置按鈕豎直方向居中*/ var _carHeight= _obj.height(); $.carousel.setCss(_obj.find("a"), _defaults.a); /*對上一張按鈕和下一張按鈕定位*/ $.carousel.setCss(_obj.find("#nextPicture"), _defaults.nextPicture); $.carousel.setCss(_obj.find("#prePicture"), _defaults.prePicture); /*綁定點擊事件*/ _next.on("click",function(){$.carousel.nextPicture(_obj, _imgsrc, _defaults)}); _pre.on("click",function(){$.carousel.prePicture(_obj, _imgsrc, _defaults)}); }, /********************************************************** * 設置元素樣式 * ***********************************************************/ setCss: function(_objElements,options){ for (var i = 0; i < _objElements.length; i++) { for(var cs in options){ _objElements.eq(i).css(cs, options[cs]); } } }, /********************************************************** * 設置定時器播放 * ***********************************************************/ loopImages: function(_obj, _imgsrc, _defaults){ window.carouselTimer = setInterval(function(){ _obj.find("img").each(function(){ if($(this).css("display") == "block"){ return index = $(this).index(); } }); ++index; _obj.find("img").eq(index).css({"display": "block"}).siblings("img").css({"display":"none"}); _obj.find("#carouselIndex li").eq(index).css({"background-color": _defaults.indexClick.backgroundColor}).siblings("li").css({"background":"none"}); if(index == _imgsrc.length){ index = 0; _obj.find("img").eq(0).css({"display":"block"}).siblings("img").css({"display":"none"}); _obj.find("#carouselIndex li").eq(0).css({"background-color": _defaults.indexClick.backgroundColor}).siblings("li").css({"background":"none"}); } }, _defaults.interval.period); }, /********************************************************** * 當點擊下一張按鈕 * ***********************************************************/ nextPicture: function(_obj, _imgsrc, _defaults){ clearInterval(window.carouselTimer); _obj.find("img").each(function(){ if($(this).css("display") == "block"){ return index = $(this).index(); } }); index = (index == _imgsrc.length - 1) ? 0 : ++index; _obj.find("img").eq(index).css({"display":"block"}).siblings("img").css({"display":"none"}); _obj.find("#carouselIndex li").eq(index).css({"background-color": _defaults.indexClick.backgroundColor}) .siblings("li").css({"background":"none"}); }, /********************************************************** * 當點擊上一張按鈕 * ***********************************************************/ prePicture: function(_obj, _imgsrc, _defaults){ clearInterval(window.carouselTimer); _obj.find("img").each(function(){ if($(this).css("display") == "block"){ return index = $(this).index(); } }); index = (index == 0 ) ? _imgsrc.length - 1 : --index; _obj.find("img").eq(index).css({"display":"block"}).siblings("img").css({"display":"none"}); _obj.find("#carouselIndex li").eq(index).css({"background-color": _defaults.indexClick.backgroundColor}) .siblings("li").css({"background":"none"}); }, /********************************************************** * 當底部的index被選中時 * ***********************************************************/ indexClick: function(_index, _obj, _imgsrc, _defaults){ _obj.find("img").eq(_index).css({"display":"block"}).siblings("img").css({"display":"none"}); _obj.find("#carouselIndex li").eq(_index).css({"background-color": _defaults.indexClick.backgroundColor}) .siblings("li").css({"background":"none"}); } } })(jQuery); ~~~ ### 輪播圖插件調用。首先包含jquery.js的庫，引入此上面的插件文件。下面是我測試時，所編寫的Html文檔，此插件非常簡單易用，只需要定義一個div即可。 ~~~ <!doctype html> <html lang="en"> <head>  <meta charset="UTF-8"> <meta name="Keywords" content="關鍵詞一，關鍵詞二"> <meta name="Description" content="網站描述內容"> <meta name="Author" content=""> <title>Document</title> <style> #carousel{ width:1200px; height:350px; } </style>  </head> <body> <div id = "carousel"> </div> </body> </html> <script type = "text/javascript" src = "jquery-1.11.2.min.js"></script> <script type = "text/javascript" src = "js/carousel_2.js"></script> <script type = "text/javascript"> $(function(){ var $carousel = $("#carousel"); var imgSrc = ["images/banner-1.jpg", "images/banner-2.jpg", "images/banner-3.jpg","images/banner-4.jpg","images/banner-5.jpg"]; //$.carousel.carousel($carousel, imgSrc); //$.carousel.carousel($carousel, imgSrc, {"interval": {"period": 1000}}); $.carousel.carousel($carousel, imgSrc, {"a": {"display": "none"}}); // $.carousel.carousel($carousel, imgSrc,{"indexClick":{"backgroundColor": "#FF0000"}, // "li":{"border": "2px solid #09FF2E"}, // "prePicture":{"background":"url(images/alarm.png)"}}); // $.carousel.carousel($carousel, imgSrc,{"indexClick":{"backgroundColor": "#FF0000"}, // "li":{"border": "2px solid #09FF2E"}, // "prePicture":{"background":"url(images/alarm.png)"}, // "nextPicture":{"background":"url(images/alarm.png)"}}); }); </script> ~~~