jquery轮播图

<style>

.active{
background: #006699;
}
.banner{
width: 500px;
height: 300px;
border: 1px solid;
overflow: hidden;
}
.banner-box{
width: 100%;
height: 300px;
}
.banner div:first-child{
background: pink;
}
.banner div:nth-child(2){
background-color: orange;
}
.banner div:nth-child(3){
background-color: lightgoldenrodyellow;
}
.banner div:nth-child(4){
background-color: yellow;
}
button{
border: none;
border-radius: 100%;
background-color: orange;
color: white;
}

</style>

<div class="banner">
<div class="banner-box"></div>
<div class="banner-box"></div>
<div class="banner-box"></div>
<div class="banner-box"></div>
</div>
<div class="button">
<button>1</button>
<button>2</button>
<button>3</button>
<button>4</button>
</div>

<script>
var index = 0;
var timer = null;
var flag1 = true;
lunbo(index);//页面进入开始轮播
//鼠标移入隐藏离开继续轮播
$('.button button').hover(function(){
index = $(this).index()//当前元素的索引
hid(index);
},function(){
show();
});
$('.banner-box').hover(function(){
index = $(this).index()//当前元素的索引
hid(index);
},function(){
show();
});
//当前元素显示按钮增加颜色其余隐藏取消颜色
function check(index){
$('.banner-box').eq(index).show().siblings().hide()
$('.button button').eq(index).addClass('active').siblings().removeClass('active')
}
//轮播函数
function lunbo(index){
index = $(this).index()//当前元素的索引
if(flag1){
timer = setInterval(function(){
if(index < $('.button button').length){
check(index)
index++;
}else{
index = 0;
}
},1000)
}
}
// 鼠标移入隐藏、
function hid(index){
flag1=false;
check(index);
lunbo(index);
clearInterval(timer);
}
// 鼠标离开继续轮播
function show(){
falg1=true;
lunbo(index);
timer = setInterval(function(){
if(index < $('.button button').length){
check(index)
index++;
}else{
index = 0
}
},1000)
}
</script>