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

　　我们在网上经常会看到一些轮播切换的效果。轮播切换，就是在一个有限的空间中定时的像走马灯一样去播放一组图片，当然也可以通过鼠标悬停在小按钮上来切换显示。下面我们将一步一步的实现这一效果。

　　为保证效果，请加入平时常用的reset.css

　　我们要做轮播切换，首先要有一个<div></div>作为容器。为了方便查找，我为其定义了一个类“gr_UI_sliderBox”。

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

.gr_UI_sliderBox {
    width: 800px;
    height: 400px;
    background-color: #eeeeee;
    margin: 0 auto;
    overflow: hidden;
    position: relative;
}

　　这样我们就完成了第一步 。看这并不复杂。不急，在下一步之前，我们先解释一下以上的代码：

　　我们定义了一个宽为800像素、高为400像素的区域来作为我们的轮播显示区。背景颜色是随意写的，目的是区分其他区域方便调试。“margin：0 auto；”是居中布局。而“overflow：hidden”和“position:relative；”将结合下一步讲解。

　　下一步：我们经在<div></div>中添加轮播的内容，我准备采用一个<ul></ul>包含多个<li></li>的方式来实现。其中每一个"li"就是我们要的一个轮播图片。

<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>
</div>

.gr_UI_sliderBox ul.img_ul {
    position: absolute;
    display: block;
    width: 300%;
    height: 400px;
    list-style: none;
}
 
.gr_UI_sliderBox ul.img_ul li {
    display: inline-block;
    width: 800px;
    height: 400px;
}
 
.gr_UI_sliderBox .slider_Item_1 {
    background:url(images/slider_img_1.png);
}
 
.gr_UI_sliderBox .slider_Item_2 {
    background:url(images/slider_img_2.png);
}
 
.gr_UI_sliderBox .slider_Item_3 {
    background:url(images/slider_img_3.png);
}

我们将这个“ul”作为容纳“li”的容器。注意我们将“li”设置为“display: inline-block;”是为了让其横向显示。而“ul”的宽度也设置成了“li”的3倍。这样ul就可以作为一个整体横向排列我们想轮播的3个图片了。

　　等一下，有没有人觉得ul的宽度比我们的div还大。没错，所以我们要回头解释div中的两个属性：

在我之前的博文中提到过“绝对定位”的概念。（即父元素position :relative；子元素position：absolute；通过top和left为子元素定位。）ul绝对定位后将从文档流中脱离出来，因此即不会'撑大'父元素也不会被父元素‘挤变形’。然后，为了让过大的子元素不溢出显示，我们将父元素设为“overflow: hidden;”这样父元素就像一个‘窗口’显示部分的ul。

　　如果熟悉绝对定位的朋友一定会马上反应出来。我们可以通过控制ul的“left”属性来实现轮播。没错，我们要通过javascript脚本来完成这最后一步。

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

　　我们编写上面的函数来通过“li”的下标控制轮播的定位。

.gr_UI_sliderBox .slider_current {
}

　　这个空的css类用来标识，当前的显示项（状态），以便定位下一个显示项。

　　接下来，我们需要完成定时的轮播效果。需要使用一个API：setInterval("函数", 定时间隔);

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

　　上面的函数就是定时器调用的函数，功能为判断当前的轮播显示项，并计算出下一个轮播显示项的下标。通过新的下标调用我们的轮播定位函数。

moveToCurrentByIndex(index)

　　即：定时器--->计算下标--->切换显示

我们需要在jQuery的ready（）中完成初始化状态和启动定时器。

$(document).ready(function(){
    var tCtr;
    $(".gr_UI_sliderBox ul.img_ul li:eq(0)").addClass("slider_current");
    tCtr = setInterval("sliderRun()", 2000);
});

　　这样一个简单的轮播切换就完成了。

在下一篇文章中我们将对轮播切换进行功能的完善，让它更像平时看到的效果。