基于JQuery实现的轮播图

HTML代码

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

JS代码

$(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');

    }
}

CSS代码

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

使用时需要自己替换图片
我的效果如下