JQuery实现的轮播图

<div class="carousel-figure clearfix">
<div class="carsoul-box clearfix">
<a class="ig" href="#"><img src="image/carsoul1.png"/></a>
<a class="ig" href="#"><img src="image/6.png" /></a>
<a class="ig" href="#"><img src="image/carsoul1.png" /></a>
<a class="ig" href="#"><img src="image/5.png" /></a>
</div>
<ul class="carousel-tabs clearfix">
</ul>
</div>

$(document).ready(function() {
carouselBox();
carouselTabs();
})

//轮播图的移动框
function carouselTabs() {
for(i = 0; i < 4; i++) {
$('.carousel-tabs').append('<li class="tab"></li>');
}
}

function carouselBox() {
//定义全局变量和定时器
var i = 0;
var timer;
var imglength = $('.carsoul-box .ig').length;
var index = $('.tab').index();
index = 0;
//设置第一张图片显示，其余隐藏
$('.ig').eq(0).show().siblings('.ig').hide();
//调用showTime()函数
showTime();
//当鼠标经过下面的tab时，触发两个事件(鼠标悬停和鼠标离开)
$('.tab').hover(function() {
//获取当前i的值，并显示，同时还要清除定时器
i = $(this).index();
Show();
clearInterval(timer);
}, function() {
showTime();
});
//创建一个showTime函数
function showTime() {
//定时器
timer = setInterval(function() {
//调用一个Show()函数
Show();
i++;
index++;
//当图片是最后一张的后面时，设置图片为第一张
if(i == imglength || index == imglength) {
i = 0;
index = 0;
}
if(i == index) {
$('.tab').eq(i).addClass('tab-index').siblings('.tab').removeClass('tab-index');
}
}, 2000);
}
//创建一个Show函数
function Show() {
//在这里可以用其他jquery的动画
$('.ig').eq(i).fadeIn(500).siblings('.ig').fadeOut(500);

//给.tab创建一个新的Class为其添加一个新的样式，并且要在css代码中设置该样式
$('.tab').eq(i).addClass('bg').siblings('.tab').removeClass('bg');

}
}

.carousel-figure {
height: 560px;
width: 100%;
}

.carsoul-box {
height: 560px;
width: 100%;
margin: 0 auto;
position: static;
}

.ig {
height: 560px;
width: 100%;
position: absolute;
}

.ig img {
height: 560px;
width: 100%;
}

.carousel-tabs {
position: relative;
top: -40px;
width: 184px;
height: 10px;
margin: 0 auto;
text-align: center;
list-style: none;
}

.tab {
float: left;
text-align: center;
width: 36px;
height: 4px;
cursor: pointer;
overflow: hidden;
margin-right: 10px;
background-color: #d4d4d3;
}

.tab-index {
cursor: pointer;
background-color: #286ee6;
}

.tab:hover {
cursor: pointer;
background-color: #286ee6;
}