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

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