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

 });

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

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

写的不好，献丑了。

巴特西

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

最新文章

热门文章