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返回的定时器对象。

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

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