<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;
}