滚动图

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"); //除了自己以为所有的兄弟元素都删除属性    }}