以前寫網頁遇到輪播的時候，要麼是引用別人已經封裝好的插件（但是別人分裝好的存在在很多大量的代碼冗餘），要麼就是慢吞吞的自己寫js,有時候寫的佈局不一樣又要從新寫一個js，自從我學習咯寫封裝的juqery方法之後，我就在自己嘗試着封裝js，這樣以後寫的時候我直接把他拉過來，然後修改初始默認值就行。
擴展jQuery插件和方法的作用是非常強大的，它可以節省大量開發時間。
;(function($){
$.fn.Myplugin = function(opitons){
//設置各種默認的初始值
var defaults = {
};
//合併初始設置
var settings = $.extend({}, defaults , opitons);
this.each(function(){
//寫入自己的代碼
});
return this;
}
})(jQuery);
這裏就是封裝插件的框架，現在你就可以往裏面添加代碼咯。具體的請往我分享的另外一篇文章查看http://blog.csdn.net/chenxi1025/article/details/52222327
下面是我分裝的一個簡單的輪播圖，
html代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>banner圖學習中</title>
<style type="text/css">
*{margin:0; padding: 0;font-family: 'Microsoft Yahei';}
a{text-decoration: none;}
li{list-style: none;}
img{border:0;}
ul{list-style: outside none none;}
.slider{ width: 1000px; height: 485px;border:1px solid #000; margin:0 auto; overflow: hidden; position: relative;text-align: center;}
.slider .slider_main li{ width: 1000px; height: 485px;position: absolute;}
.slider .slider_main img{ width: 1000px; height: 485px;}
.slider .slider_nav{ width:160px; height:15px;bottom:15px; left: 40%; position: absolute;border:1px solid #ff0000;text-align: center;}
.slider .slider_nav li{ float: left; width: 15px; height: 15px; cursor: pointer; background: #ccc; text-align: center; margin-left:10px;border-radius: 50%;}
.slider-nav .on{background: #f73f07; }
.slider .slider_nav li.on{ background: #f73f07; }
.slider .slider_page .slider_pre,.slider .slider_page .slider_next{width: 51px;top:46%; height: 51px; position: absolute; display:inline-block; *display:inline; zoom:1; z-index: 8;}
.slider .slider_page .slider_pre{left:10px; background: url(../imgs/btn.png) no-repeat 0 0;}
.slider .slider_page .slider_next{right:10px; background: url(../imgs/btn.png) no-repeat -58px 0;}
.slider .slider_pre:hover{background: url(../imgs/btn.png) no-repeat 0 -70px;}
.slider .slider_next:hover{background: url(../imgs/btn.png) no-repeat -58px -70px;}
</style>
</head>
<body>
<!-- 第一步先放一個大盒子，裝圖片和相關按鈕 -->
<div class="slider" id="sliderBox">
<!-- 第二步放圖片佈局 -->
<ul class="slider_main">
<li class=""><a href="#"><img src="imgs/1.png" alt="" /></a></li>
<li><a href="#"><img src="imgs/2.png" alt="" /></a></li>
<li><a href="#"><img src="imgs/3.png" alt="" /></a></li>
<li><a href="#"><img src="imgs/4.png" alt="" /></a></li>
<li><a href="#"><img src="imgs/5.png" alt="" /></a></li>
</ul>
<!-- <div class="slider_extro"> -->
<!-- 點點索引 -->
<ul class="slider_nav">
<li class="slider_item on"></li>
<li class="slider_item"></li>
<li class="slider_item"></li>
<li class="slider_item"></li>
<li class="slider_item"></li>
</ul>
<!-- 左右箭頭 -->
<div class="slider_page">
<a class="slider_pre" href="javascript:;"></a>
<a class="slider_next" href="javascript:;"></a>
</div>
<!-- </div> -->
</div>
</body>
<script type="text/javascript" src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
<script src="js/jquery.IndexBanner.js"></script>
<script type="text/javascript">
$("#sliderBox").jquerySlider ({
auto:false,
duration:1000
});
</script>
</html>封裝好的js文件：
/*
* @Author: Lydia
* @Date: 2016-07-25 17:30:07
* @Last Modified by name: Lydia
* @Last Modified time: 2017-12-20 15:03:39
*/
;(function($){
//定義插件名稱 jquerySlider
$.fn.jquerySlider = function(options){
//定義默認設置
var defaults = {
auto: true, //是否自動播放
sliderli:'.slider_main li',
pagenvali:'.slider_nav li', //分頁按鈕集合
active:"active",
prev: '.slider_pre', //上一頁
next: '.slider_next', //下一頁
actions:"click",
curren:0,
times: 3000, //定時器時間
flag: true //默認從左往右播放
};
//可以被拓展的默認設置(通過使用$.extend)
var options = $.extend({}, defaults, options); //{}這個代表是把defaults 和後面的optinso整合一起返回給你options
this.each(function(){
var _this = $(this),
sliderli = $(options.sliderli,_this),
pagenvali = $(options.pagenvali,_this),
interval = null;//定時器
//分頁
pagenvali.on(options.actions, function(event) {
event.preventDefault();
var index = $(this).index();
$(this).addClass(options.active).siblings(pagenvali).removeClass(options.active);
sliderli.eq(index).fadeIn().siblings(sliderli).fadeOut();
});
//上一頁，下一頁，注意這裏因爲是上一頁和下一頁，記得要打逗號 + “ ，”+
$(options.prev+','+options.next).on('click', function(event) {
event.preventDefault();
clearInterval(interval);//清除定時器
$(this).is(options.prev) ? sliderchage(false) : sliderchage(true);
});
//hover
_this.hover(function() {
clearInterval(interval);
}, function() {
autoplay();
});
//切換js
function sliderchage(flag){
console.log("循環播放")
if(flag){
if(options.curren >= sliderli.length-1){
options.curren = 0 ;
}else{
options.curren++;
}
}else{
if(options.curren <= 0){
options.curren = sliderli.length-1;
}else{
options.curren--;
}
}
pagenvali.eq(options.curren).addClass(options.active).siblings().removeClass(options.active);
sliderli.eq(options.curren).fadeIn().siblings(sliderli).fadeOut();
}
//自動播放
function autoplay(){
interval = setInterval(function(){
sliderchage(options.flag);
}, options.times);
}
//是否自動播放
options.auto ? autoplay():''
});
//返回
return this;
}
})(jQuery);
裏面可能還有一些精簡的方法，還望各位大神指點指點，謝謝！
後期如果有時間的話我會把一些特效添加上，如果以上代碼有不足的地方，請到大家及時指出，希望你有所收穫
