我们在网上经常会看到一些轮播切换的效果。轮播切换，就是在一个有限的空间中定时的像走马灯一样去播放一组图片，当然也可以通过鼠标悬停在小按钮上来切换显示。下面我们将一步一步的实现这一效果。
为保证效果，请加入平时常用的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);
});这样一个简单的轮播切换就完成了。
在下一篇文章中我们将对轮播切换进行功能的完善，让它更像平时看到的效果。