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();
});

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

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

写的不好，献丑了。