在上一篇博文中,我们完成了一个简单的轮播切换。它的功能比较简单,仅仅能定时切换图片。
但是有没有这样一种情况。当我们特意的想看某一个轮播显示项时不希望等轮播一圈才能等到,希望通过图上的一些元素,触发某些事件,而快速轮播到目标项。
在很多网站中,都有这样的效果。基本上,是通过轮播图上的小圆点来实现的。那么我们就在上一个轮播切换的基础上进行完善。
我们将他做成鼠标悬停在小圆点上时就显示对应的目标项。
等一下,这不就是tab选项卡的升级版吗?没错。
首先,我们将这个小圆点起名为‘轮播按钮’(方便文章描述,即用‘轮播按钮’控制‘轮播图’)。
1 <div class="gr_UI_sliderBox">
2 <ul class="img_ul">
3 <li class="slider_Item_1"></li><li class="slider_Item_2"></li><li class="slider_Item_3"></li>
4 </ul>
5 <ul class="btn_ul">
6 <li></li><li></li><li></li>
7 </ul>
8 </div>
即上面的class=“btn_ul”
接下来我们在css中为其添加式样(平时的式样,和悬停的式样)。
1 .gr_UI_sliderBox ul.btn_ul {
2 position: absolute;
3 width: 100px;
4 height: 20px;
5 top: 300px;
6 left: 350px;
7 list-style: none;
8 }
9
10 .gr_UI_sliderBox ul.btn_ul li {
11 display: inline-block;
12 width: 13px;
13 height: 13px;
14 margin-right: 5px;
15 background:url("images/point.png") no-repeat 0 0;
16 }
17
18 .gr_UI_sliderBox ul.btn_ul li.current_btn {
19 background:url("images/point.png") no-repeat 0 -14px;
20 }
通过以上的代码,我们通过绝对布局的方式,将轮播按钮定位到轮播图的中下方。
这里要注意的是,我没有为轮播按钮定义CSS的伪类。没有定义:hover式样。是因为,我准备在脚本之中完成这一效果,因为我轮播图在轮播时当然要让轮播按钮也跟着对应的变更式样。我不想写两套式样,所以我在css文件中只定义了,“当前”和“普通”两个式样,再用js控制。
现在,我们更新一下js文件:
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 //按钮变化
10 $(".gr_UI_sliderBox ul.btn_ul li:eq(" + index + ")").addClass("current_btn").siblings().removeClass("current_btn");
11 }
12
13 function sliderRun(){
14 var newCurrentIndex = $(".gr_UI_sliderBox ul.img_ul li.slider_current").index() + 1;
15 var liCount = $(".gr_UI_sliderBox ul.img_ul li").length;
16 if(newCurrentIndex >= liCount){
17 newCurrentIndex = 0;
18 }
19 console.log("new index : " + newCurrentIndex + " length : " + liCount);
20 moveToCurrentByIndex(newCurrentIndex);
21 }
22
23 /*
24 在上面这两个函数中我们分别实现两个功能:(1)function moveToCurrentByIndex(index)通过参数(下标值)切换轮播图,同时切换轮播按钮的式样;(2)function sliderRun()获取下一个状态的下标值,并调用第一个函数;*/
以上是定时轮播的代码,接下来,我们一起完成轮播按钮的悬停事件:
这需要在ready()中完成:
1 $(document).ready(function(){
2 var tCtr;
3 $(".gr_UI_sliderBox ul.img_ul li:eq(0)").addClass("slider_current");
4 $(".gr_UI_sliderBox ul.btn_ul li:eq(0)").addClass("current_btn");
5 $(".gr_UI_sliderBox ul.btn_ul li").mouseenter(function(){
6 clearTimeout(tCtr);
7 moveToCurrentByIndex($(this).index());
8 }).mouseleave(function(){
9 tCtr = setInterval("sliderRun()", 2000);
10 });
11
12 tCtr = setInterval("sliderRun()", 2000);
13 });
因为我们是通过‘当前类’的方式来获取目标Dom的,所以我们要在初始化的时候为‘当前类’指定一个元素。
然后我们需要为轮播按钮绑定悬停事件。值得注意的是,当我们将鼠标悬停在某一个轮播按钮上时,我们的轮播图对应的切换后,我们要停掉定时器,当鼠标离开轮播按钮时在启动定时器。
这需要保留定时器API返回的定时器对象。
这样我们就完成了一个普通的轮播切换。
在下一篇博文中我们要将它改写成插件。