我们在网上经常会看到一些轮播切换的效果。轮播切换，就是在一个有限的空间中定时的像走马灯一样去播放一组图片，当然也可以通过鼠标悬停在小按钮上来切换显示。下面我们将一步一步的实现这一效果。
为保证效果，请加入平时常用的reset.css
我们要做轮播切换，首先要有一个<div></div>作为容器。为了方便查找，我为其定义了一个类“gr_UI_sliderBox”。
.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"就是我们要的一个轮播图片。
1
1 .gr_UI_sliderBox ul.img_ul { 2 position: absolute; 3 display: block; 4 width: 300%; 5 height: 400px; 6 list-style: none; 7 } 8 9 .gr_UI_sliderBox ul.img_ul li {10 display: inline-block;11 width: 800px;12 height: 400px;13 }14 15 .gr_UI_sliderBox .slider_Item_1 {16 background:url(images/slider_img_1.png);17 }18 19 .gr_UI_sliderBox .slider_Item_2 {20 background:url(images/slider_img_2.png);21 }22 23 .gr_UI_sliderBox .slider_Item_3 {24 background:url(images/slider_img_3.png);25 } 我们将这个“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脚本来完成这最后一步。
1 function moveToCurrentByIndex(index){ 2 3 $(".gr_UI_sliderBox ul.img_ul li.slider_current").removeClass("slider_current"); 4 $(".gr_UI_sliderBox ul.img_ul li:eq(" + index + ")").addClass("slider_current"); 5 var move_x = -index * 800; 6 var str_m_x = move_x + "px"; 7 var $sliderUl = $(".gr_UI_sliderBox ul.img_ul"); 8 $sliderUl.animate({left: str_m_x}, "slow"); 9 $(".gr_UI_sliderBox ul.btn_ul li:eq(" + index + ")").addClass("current_btn").siblings().removeClass("current_btn");10 } 我们编写上面的函数来通过“li”的下标控制轮播的定位。
.gr_UI_sliderBox .slider_current {} 这个空的css类用来标识，当前的显示项（状态），以便定位下一个显示项。
接下来，我们需要完成定时的轮播效果。需要使用一个API：setInterval("函数", 定时间隔);
1 function sliderRun(){2 var newCurrentIndex = $(".gr_UI_sliderBox ul.img_ul li.slider_current").index() + 1;3 var liCount = $(".gr_UI_sliderBox ul.img_ul li").length;4 if(newCurrentIndex >= liCount){5 newCurrentIndex = 0;6 }7 console.log("new index : " + newCurrentIndex + " length : " + liCount);8 moveToCurrentByIndex(newCurrentIndex);9 } 上面的函数就是定时器调用的函数，功能为判断当前的轮播显示项，并计算出下一个轮播显示项的下标。通过新的下标调用我们的轮播定位函数。
moveToCurrentByIndex(index)
即：定时器--->计算下标--->切换显示
我们需要在jQuery的ready（）中完成初始化状态和启动定时器。
1 $(document).ready(function(){2 var tCtr;3 $(".gr_UI_sliderBox ul.img_ul li:eq(0)").addClass("slider_current");4 tCtr = setInterval("sliderRun()", 2000);5 }); 这样一个简单的轮播切换就完成了。
在下一篇文章中我们将对轮播切换进行功能的完善，让它更像平时看到的效果。