<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();
$('.tab').hover(function() {
i = $(this).index();
Show();
clearInterval(timer);
}, function() {
showTime();
});
function showTime() {
timer = setInterval(function() {
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);
}
function Show() {
$('.ig').eq(i).fadeIn(500).siblings('.ig').fadeOut(500);
$('.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;
}