轮播图

html：

<div class="wrap">

    <ul class="tab_t">

        <li class="active"><a href="#"><img src="imgs/1.jpg"></a></li>

        <li><a href="#"><img src="imgs/2.jpg"></a></li>

        <li><a href="#"><img src="imgs/3.jpg"></a></li>

        <li><a href="#"><img src="imgs/4.jpg"></a></li>

        <li><a href="#"><img src="imgs/5.jpg"></a></li>

        <li><a href="#"><img src="imgs/6.jpg"></a></li>

        <li><a href="#"><img src="imgs/7.jpg"></a></li>

        <li><a href="#"><img src="imgs/8.jpg"></a></li>

    </ul>

    <div class="circle">

        <ul>

            <li class="acitve_c"></li>

            <li></li>

            <li></li>

            <li></li>

            <li></li>

            <li></li>

            <li></li>

            <li></li>

        </ul>

    </div>

    <span class="left"> < </span>

    <span class="right"> > </span>

</div>

css：

*{

    padding:0;

    margin:0;

    list-style:none;

}

.wrap{

    width:790px;

    height:340px;

    margin:55px auto;

    overflow:hidden;

    position:relative;

}

.wrap .tab_t li{

    position:absolute;

    top:0;

    left:0;

    display:none;

}

.wrap li.active{

    display:block;

}

/*下方小圆点的样式*/

.circle{

    width:226px;

    height:20px;

    background:rgba(255,255,255,0.5);

    position:absolute;

    bottom:20px;

    left:50%;

    margin-left:-113px;

}

.circle li{

    width:16px;

    height:16px;

    background:#fff;

    border-radius:50%;

    margin:2px 6px;

    float:left;

}

.circle li.acitve_c{

    background:red;

}

/*左右箭头*/

span{

    width:28px;

    height:60px;

    font-size:30px;

    line-height:60px;

    text-align:center;

    color:#fff;

    background:rgba(0,0,0,0.3);

    position:absolute;

    top:50%;

    margin:-30px;

    cursor:pointer;

}

span:hover{

    background:rgba(0,0,0,0.6);

}

.left{

    left:30px;

}

span.right{

    right:30px;

}

js：

//eq()获取第n个元素，n是从0开始的；

$(function(){

//    每过1s下一个添加active类名；其余类名去掉；

    var run;

    var num = 0;

    getRun();

//    鼠标划上wrap，图片停止切换；

    $(".wrap").mouseover(function(){

        clearInterval(run);

    })

    //当鼠标滑动到圆圈的效果；

    $(".circle li").mouseover(function(){

        num = $(this).index();   //将num与当时鼠标划上的索引相等；

        $(".tab_t li").eq(num).addClass("active").siblings().removeClass("active");

        $(".circle li").eq(num).addClass("acitve_c").siblings().removeClass("acitve_c");

    });

//    鼠标出来，图片接续切换；

    $(".wrap").mouseout(function(){

        getRun();

    });

    //    点击左按钮出现的效果；

    $(".left").click(function(){

        num--;

        if(num <0){

            num = 7;

        }

        $(".tab_t li").eq(num).addClass("active").siblings().removeClass("active");

        $(".circle li").eq(num).addClass("acitve_c").siblings().removeClass("acitve_c");

    })

    //点击右按钮出现的效果；

    $(".right").click(function(){

        num++;

        if(num >7){

            num = 0;

        }

        $(".tab_t li").eq(num).addClass("active").siblings().removeClass("active");

        $(".circle li").eq(num).addClass("acitve_c").siblings().removeClass("acitve_c");

    });

    //图片自动切换方法；

    function getRun(){

        //图片自动切换；

        run = setInterval(function(){

            num++;

            if(num == 8){

                num = 0;

            }

            $(".tab_t li").eq(num).addClass("active").siblings().removeClass("active");

            $(".circle li").eq(num).addClass("acitve_c").siblings().removeClass("acitve_c");

        },1000);

    }

})