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

　　在上一篇博文中，我们完成了一个简单的轮播切换。它的功能比较简单，仅仅能定时切换图片。

但是有没有这样一种情况。当我们特意的想看某一个轮播显示项时不希望等轮播一圈才能等到，希望通过图上的一些元素，触发某些事件，而快速轮播到目标项。

在很多网站中，都有这样的效果。基本上，是通过轮播图上的小圆点来实现的。那么我们就在上一个轮播切换的基础上进行完善。

我们将他做成鼠标悬停在小圆点上时就显示对应的目标项。

等一下，这不就是tab选项卡的升级版吗？没错。

首先，我们将这个小圆点起名为‘轮播按钮’（方便文章描述，即用‘轮播按钮’控制‘轮播图’）。

 <div class="gr_UI_sliderBox">
           <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>
 </div>

即上面的class=“btn_ul”

接下来我们在css中为其添加式样（平时的式样，和悬停的式样）。

 .gr_UI_sliderBox ul.btn_ul {
     position: absolute;
     width: 100px;
     height: 20px;
     top: 300px;
     left: 350px;
     list-style: none;
 }

 .gr_UI_sliderBox ul.btn_ul li {
     display: inline-block;
     width: 13px;
     height: 13px;
     margin-right: 5px;
     background:url("images/point.png") no-repeat 0 0;
 }

 .gr_UI_sliderBox ul.btn_ul li.current_btn {
     background:url("images/point.png") no-repeat 0 -14px;
 }

通过以上的代码，我们通过绝对布局的方式，将轮播按钮定位到轮播图的中下方。

这里要注意的是，我没有为轮播按钮定义CSS的伪类。没有定义：hover式样。是因为，我准备在脚本之中完成这一效果，因为我轮播图在轮播时当然要让轮播按钮也跟着对应的变更式样。我不想写两套式样，所以我在css文件中只定义了，“当前”和“普通”两个式样，再用js控制。

现在，我们更新一下js文件：

 function moveToCurrentByIndex(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 sliderRun(){
     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);
     moveToCurrentByIndex(newCurrentIndex);
 }

 /*
     在上面这两个函数中我们分别实现两个功能：（1）function moveToCurrentByIndex(index)通过参数（下标值）切换轮播图，同时切换轮播按钮的式样；（2）function sliderRun()获取下一个状态的下标值，并调用第一个函数；*/

以上是定时轮播的代码，接下来，我们一起完成轮播按钮的悬停事件：

这需要在ready（）中完成:

 $(document).ready(function(){
     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").mouseenter(function(){
         clearTimeout(tCtr);
         moveToCurrentByIndex($(this).index());
     }).mouseleave(function(){
         tCtr = setInterval("sliderRun()", 2000);
     });

     tCtr = setInterval("sliderRun()", 2000);
 });

因为我们是通过‘当前类’的方式来获取目标Dom的，所以我们要在初始化的时候为‘当前类’指定一个元素。

然后我们需要为轮播按钮绑定悬停事件。值得注意的是，当我们将鼠标悬停在某一个轮播按钮上时，我们的轮播图对应的切换后，我们要停掉定时器，当鼠标离开轮播按钮时在启动定时器。

这需要保留定时器API返回的定时器对象。

这样我们就完成了一个普通的轮播切换。

在下一篇博文中我们要将它改写成插件。