jQuery的TAB切换+定时器

标签：

对于焦点轮播图，首选的都是用JS去写，很多原因都说是因为定时器啊，获取遍历啊各种原因

以下我写的焦点轮播图，用的JQ的tabe切换加了一个定时器~

JQ代码如何：

var banner_box=$(".banner_box li"),//获取图片的li
buttons=$(".img_tit li"),//获取按钮的li
iNow=0, //遍历初始值为0
timer=null;//定时器
butsl=buttons.length; //按钮的个数

buttons.mouseover(function(){
clearInterval(timer);//鼠标移入按钮取消定时器
iNow =$(this).index();
$(this).addClass("active").siblings().removeClass("active");//鼠标滑动按钮添加active
banner_box.eq(iNow).show().siblings().hide();//点击按钮遍历对应的图片显示
});

//鼠标移出按钮，执行定时器
buttons.mouseout(function(){
show();
});

//定时器放到一个函数里
function show(){
timer= setInterval(function(){
iNow++;

if(iNow>butsl){
iNow=0;
}
banner_box.eq(iNow).show().siblings().hide();
buttons.eq(iNow).addClass("active").siblings().removeClass("active");
},1000);
};

show();

});

CSS代码：

<div class="conwind">
<div class="banner_box">
<ul>
<li style="display:block;"><a href="#"><img src="image/pic.jpg" alt="banner"></a></li>
<li><a href="#">11111111111111</a></li>
<li><a href="#">2222222222222222</a></li>
<li><a href="#">3333333333333333</a></li>
<li><a href="#">4444444444444</li>
</ul>
</div>
<div class="img_tit conwind" id="buttons">
<ul>
<li class="active" index="1">双立人平底锅4件套</li>
<li index="2">双立人平底锅4件套</li>
<li index="3">双立人平底锅4件套</li>
<li index="4">双立人平底锅4件套</li>
<li index="5">双立人平底锅4件套</li>
</ul>
</div>
</div>

jQuery的TAB切换+定时器

标签：

原文地址：http://www.cnblogs.com/qdmaomao/p/4480602.html