轮播图

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