滚动图

html：

<!--滚动图片-->
<div id="body_1" >
     <!--图片区-->
     <div id="pic">
         <img src="img/1.jpg" style="display: block">
         <img src="img/2.jpg">
         <img src="img/3.jpg">
         <img src="img/4.jpg">
     </div>
    <!--底部选卡-->
    <div id="tab">
        <ul>
            <li class="on" ></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
    <!--左右按钮-->
    <div id="btn">
        <a href="#" id="left">&lt;</a>
        <a href="#" id="right">&gt;</a>
    </div>
</div>

css：

#body_1{
    width: 1000px;
    height: 200px;
    background-color: burlywood;
    margin-left: auto;
    margin-right: auto;
    margin-top: 10px;
    position: relative;/*必须设置成relative后面的tab才能相对于它absolute*/
}
#pic{
    width: 1000px;
    height: 200px;
    position: relative;/*必须设置成relative后面的img才能相对于它absolute*/
    border: 1px solid green;
}

#pic img{
    position: absolute;
    display: none;
}

#tab{
    width: 90px;
    height: 20px;
    position: absolute;
    bottom: 5px;
    right: 25px;
}

#tab ul li{
    float: left;
    width: 6px;
    height: 5px;
    background-color: darkgrey;
    border: 2px solid slategrey;
    border-radius: 5px;
    margin: 0px 3px;
    opacity: 6;
    transition: .3s;/*有一个过渡的延时*/
    cursor: pointer;/*改变鼠标的形状*/
}

#tab ul li.on{
    background-color: aliceblue;
}

#btn a{
    display: block;
    width: 36px;
    height: 50px;
    font-size: 36px;
    text-align: center;
    position: relative;
    top: -128px;
    color: #bbbbbb;
    cursor: pointer;
}

#btn a:hover{
    background-color:rgba(0,0,0,.5);
    color: white;
}
#right{
    float: right;
}
#left{
    float: left;
}
#tab ul li:hover{
    background-color: aliceblue;
}

js：

var indexCont=0;

$(document).ready(function(){

//滚动图片
    var innt=self.setInterval("slideshow()",3000); //slideshow不能写在ready里面，一定要写在外面

    $("#tab ul li").click(function(){
        var index=$(this).index();//获取当前被点击元素的序列号,它是从0开始的
        indexCont=index;
        $("#pic img").eq(index).fadeIn(1000).siblings().fadeOut(1000);//.siblings()找到除了自己以为它的所有兄弟级元素
        $(this).addClass("on").siblings().removeClass("on"); //除了自己以为所有的兄弟元素都删除属性
    });

    $("#left").click(function(){
        if(indexCont>0){
            indexCont-=1;
            $("#pic img").eq(indexCont).fadeIn(1000).siblings().fadeOut(1000);//.siblings()找到它的所有兄弟级元素
            $("#tab ul li").eq(indexCont).addClass("on").siblings().removeClass("on"); //除了自己以为所有的兄弟元素都删除属性
        }else{
            indexCont=3;
            $("#pic img").eq(indexCont).fadeIn(1000).siblings().fadeOut(1000);//.siblings()找到它的所有兄弟级元素
            $("#tab ul li").eq(indexCont).addClass("on").siblings().removeClass("on"); //除了自己以为所有的兄弟元素都删除属性
        }
    });
    $("#right").click(function(){
       if(indexCont<3)
       {
           indexCont+=1;
           $("#pic img").eq(indexCont).fadeIn(1000).siblings().fadeOut(1000);//.siblings()找到它的所有兄弟级元素
           $("#tab ul li").eq(indexCont).addClass("on").siblings().removeClass("on"); //除了自己以为所有的兄弟元素都删除属性
       }else{
           indexCont=0;
           $("#pic img").eq(indexCont).fadeIn(1000).siblings().fadeOut(1000);//.siblings()找到它的所有兄弟级元素
           $("#tab ul li").eq(indexCont).addClass("on").siblings().removeClass("on"); //除了自己以为所有的兄弟元素都删除属性
       }
    });
});


function slideshow(){
    console.log(122321);
    if(indexCont<3){
        indexCont++;
        $("#pic img").eq(indexCont).fadeIn(1000).siblings().fadeOut(1000);//.siblings()找到它的所有兄弟级元素
        $("#tab ul li").eq(indexCont).addClass("on").siblings().removeClass("on"); //除了自己以为所有的兄弟元素都删除属性
    }else{
        indexCont=0;
        $("#pic img").eq(indexCont).fadeIn(1000).siblings().fadeOut(1000);//.siblings()找到它的所有兄弟级元素
        $("#tab ul li").eq(indexCont).addClass("on").siblings().removeClass("on"); //除了自己以为所有的兄弟元素都删除属性
    }
}