jquery幻燈片外掛開發圖文教學

1

2

jquery外掛的標準格式-自呼叫匿名函數

;(function($,window,document,undefined){

})(jQuery,window,document);

3

使用物件導向的開發外掛

;(function($,window,document,undefined){

        var zSlider = function(element,options){

       }

        zSlider.prototype = {

           init:function(){

           }

       }

      $.fn.zSlider = function(options){

        var obj = new zSlider(this,options);

         obj.init();

        return this;//返回jQuery選擇器的集合，以便鏈式呼叫

     }

})(jQuery,window,document);

4

定義外掛引數

this.$element = element;

this.options = $.extend(true,{

animate: 'roll',

direction : 'horizontal',//捲動方向,vertical重直捲動,horizontal水平捲動

event:"mouseover",

duration: 3000,//播放頻率

speed : 500,//捲動速度

auto : true//是否自動播放

},options);

5

初始化資料

init:function(){

this.index = 0;//開始的索引

//圖片寬度

this.width = $('.'+this.options.pic_class,this.$element).find('img:first').width();

//圖片高度

this.height = $('.'+this.options.pic_class,this.$element).find('img:first').height();

//圖片大包裝盒

this.img_wrop = this.$element.find('.'+this.options.pic_class);

//所有小包裝盒

this.img_box = this.img_wrop.children();

//所有圖片

this.imgs = this.$element.find('.'+this.options.pic_class+' img');

//圖片數量

this.number = this.imgs.length;

//設定slider的為絕對定位

this.$element.css({'position':'relative'});

//設定包裝盒為相對定位

this.img_wrop.css({'position':'absolute',top:'0px',left:'0px'});

//如果為水平捲動，設定大包裝盒的寬度，圖片小包裝盒為左浮動

if(this.options.direction == 'horizontal' && this.options.animate == 'roll'){

this.img_wrop.css({'width':this.width*this.number+'px'});

this.img_box.css({'float':'left'});

}

//生成導航

this.createNav();

//是否自動播放

if(this.options) this.play();

//係結事件，切換圖片

this.bind(this.options.event);

},

6

編寫生成導航方法

向zSlider的原型中新增生成導航的createNav方法

createNav:function(){

this.$element.append('<div class="nav"></div>');

this.$nav = this.$element.find('.nav');

for(var i =1;i<=this.number;i++){

this.$nav.append('<span>●</span>')

}

this.$nav.css({'position':'absolute',

'z-index':3,'left':'50%',

'bottom':'20px',

'text-align':'center',

'font-size':'0',

'border-radius':'10px',

'background-color':' rgba(255,255,255,0.3)',

'filter': 'alpha(opacity:30)'});

this.$nav.find('span').css({'display':'inline-block',

'font-size':'14px','color':'#fff',

'text-decoration':'none',

'cursor':'pointer',

'margin':'2px'});

this.$nav.find('span:first').addClass('on');

this.$nav.find('.on').css({'color':'orange'});

var nav_margin_left = this.$nav.width()*(-0.5);

//獲取導航margin-left的偏移量，必需先設定好span的大小之後在獲取,否則獲取的將是父素的寬度

this.$nav.css({'margin-left':nav_margin_left+'px'});

}

7

自動播放方法

play : function(){

var Z = this;//setInterval中的this是指向window物件，所以也要儲存起來，以便在setInterval中使用

if(this.element.timer)clearInterval(this.element.timer);

this.element.timer = setInterval(function(){

Z.index++

if(Z.index >= Z.number){//如果索引大於或者等於圖片總數

Z.index =0;

}

Z.$nav.removeClass('on').css({'color':'#fff'});

Z.$nav.eq(Z.index).addClass('on').css({'color':'orange'});

Z[Z.options.animate]();//圖片動畫

},this.options.duration);

},

8

9

10

到此，幻燈片外掛就大功告成，是不是很簡單。如果你要使用淡入淡出動畫，只需在zSlider的原型上新增一個淡入淡出的動畫即可。