jQuery实现轮播切换以及将其封装成插件（3）

　　在前两篇博文中，我们写了一个普通的轮播切换。但是我们不能每一次需要这个功能就把这些代码有重新敲一次。下面我们就将它封装成一个插件。

　　至于什么是插件，又为什么要封装插件，不是本文考虑的内容。

　　 我们趁着刚才的思路还在，直接开始写。

一、jQuery插件的基本结构：

我只介绍本例中用到的一种插件:

 (function($){
     $.fn.extend({
         "插件函数名（随意）"：function(){
             //函数内容

         }
     }）;
 }）（jQuery）;

二、要做哪些准备

按照我的个人习惯。首先需要前面博文中我们写的html代码作为模板。使用jQuery动态生成它。

然后将涉及到的CSS式样，放入单独的文件。最后将js函数放入上面的插件函数中，作为函数中的函数。

 ;(function($){
     $.fn.extend({
         "mySlider":function(){
             if(!this.hasClass("gr_UI_sliderBox")){
                 console.log("this dom not have class gr_UI_sliderBox");
                 return;
             }

             //be sure only once and add ul.
             var $sliderUl = this.find("ul");
             if($sliderUl.length>=1){
                 return;
             }

             var $add = $("<ul class='img_ul'><li class='slider_Item_1'></li><li class='slider_Item_2'></li><li class='slider_Item_3'></li></ul><ul class='btn_ul'><li></li><li></li><li></li></ul>");
             $(this).append($add);

             function moveByIndex(index){

                 $(".gr_UI_sliderBox ul.img_ul li.slider_current").removeClass("slider_current");
                 $(".gr_UI_sliderBox ul.img_ul li:eq(" + index + ")").addClass("slider_current");
                 var move_x = -index * 800;
                 var str_m_x = move_x + "px";
                 var $sliderUl = $(".gr_UI_sliderBox ul.img_ul");
                 $sliderUl.animate({left: str_m_x}, "slow");
                 $(".gr_UI_sliderBox ul.btn_ul li:eq(" + index + ")").addClass("current_btn").siblings().removeClass("current_btn");
             }

             function s_Run(){
                 var newCurrentIndex = $(".gr_UI_sliderBox ul.img_ul li.slider_current").index() + 1;
                 var liCount = $(".gr_UI_sliderBox ul.img_ul li").length;
                 if(newCurrentIndex >= liCount){
                     newCurrentIndex = 0;
                 }
                 console.log("new index : " + newCurrentIndex + "     length : " + liCount);
                 moveByIndex(newCurrentIndex);
             }

         }

     });

这样，我们就可以通过mySlider函数动态生成轮播切换。

但是，就以目前的代码，是不包括事件的。注意在插件函数中是不能使用ready（）的。我们可以自己初始化，并且绑定事件和函数。

 　　　　　　　//init
             var tCtr;
             $(".gr_UI_sliderBox ul.img_ul li:eq(0)").addClass("slider_current");
             $(".gr_UI_sliderBox ul.btn_ul li:eq(0)").addClass("current_btn");
  　　　　　　

  　　　　　　//绑定事件
             $(".gr_UI_sliderBox ul.btn_ul li").bind({
                 mouseenter:function(){
                     clearTimeout(tCtr);
                     moveByIndex($(this).index());
                 },
                 mouseleave:function(){
                     tCtr = setInterval(s_Run, 2000);
                 }

             });

             tCtr = setInterval(s_Run, 2000);

我们完成了插件的编写，但是我们要如何使用呢？

下面我们来调用它。

我们将所需要的文件（插件.js和插件.css）配置到工程中。在需要使用的地方定义一个<div></div>

<div class="gr_UI_sliderBox" id="test"></div>

在上面的代码中，gr_UI_sliderBox就是我们的插件类。然后再ready（）中调用我们的生成“轮播”的插件函数：

 $(document).ready(function(){
     $("#test").mySlider();
 });

这样，刷新页面后我们就生成了，和上一篇博文中一模一样的自定义控件了。

通过这三篇博文，我们完成了一个轮播切换功能的编写。

写的不好，献丑了。