jquery tab Toggle + Timer

For the focus of the carousel, the first choice is to write with JS, a lot of reasons are said to be because of the timer ah, get traversal ah various reasons

The following I wrote the focus of the Carousel diagram, with the JQ of the Tabe switch added a timer ~

How the JQ code:

var banner_box=$ (". Banner_box li"),//Get pictures of Li
buttons=$ (". Img_tit li"),//Get button Li
Inow=0,//Traversal initial value is 0
timer=null;//Timer
Butsl=buttons.length; Number of buttons

Buttons.mouseover (function () {
Clearinterval (timer);//mouse-in button cancel timer
Inow =$ (This). index ();
$ (this). AddClass ("active"). Siblings (). Removeclass ("active");//mouse swipe button to add active
Banner_box.eq (Inow). Show (). siblings (). hide ();//Click the button to traverse the corresponding picture display
});

Mouse move Out button, execute timer
Buttons.mouseout (function () {
Show ();
});

Put the timer in a function.
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 code:

<div class= "Conwind" >
<div class= "Banner_box" >
<ul>
<li style= "Display:block;" ><a href= "#" ></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" > Zwilling pan 4-piece set </li>
<li index= "2" > Zwilling pan 4-piece set </li>
<li index= "3" > Zwilling pan 4-piece set </li>
<li index= "4" > Zwilling pan 4-piece set </li>
<li index= "5" > Zwilling pan 4-piece set </li>
</ul>
</div>
</div>

jquery tab Toggle + Timer