菜鸟：自己写了一个轮播代码供分为参考，如果有什么地方你有更好的方法，可以给我留言

本文链接：https://blog.csdn.net/wtianheihei/article/details/77507981

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>轮播图</title>
    <link rel="stylesheet" href="css.css" type="text/css">
    <script src="js/jquery-3.1.1.min.js"></script>
    <script src="js/indexjs.js"></script>
</head>
<body>
<div class="big_carousel">
    <!--轮播图片-->
    <div class="img_circle">
        <ul class="img_circle_ul">
            <li><a href="#"><img src="images/1.jpg"></a></li>
            <li><a href="#"><img src="images/2.jpg"></a></li>
            <li><a href="#"><img src="images/3.jpg"></a></li>
            <li><a href="#"><img src="images/4.jpg"></a></li>
            <li><a href="#"><img src="images/5.jpg"></a></li>
            <li><a href="#"><img src="images/6.jpg"></a></li>
        </ul>
    </div>
    <!--左右箭头-->
    <div class="left_right_arrow">
        <div class="left_arrow"><a href="#"> < </a></div>
        <div class="right_arrow"><a href="#"> > </a></div>
    </div>
    <!--下标符号-->
    <div class="sub">
        <ul class="sub_ul">
            <li class="sub_li_bg"></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
</div>
</body>
</html>

*{
    margin:0;
    padding:0;
}
ul,ol{
    list-style:none;
}
a{
    text-decoration:none;
}
/*外边div总样式*/
.big_carousel{
    position:relative;
    width:1146px;
    height:400px;
    background-color:red;
    margin:0 auto;
}

/*箭头样式*/

.left_arrow{
    top:160px;
    position:absolute;
}
.right_arrow{
    top:160px;
    right:0;
    position:absolute;
}
.left_arrow a,.right_arrow a{
    display:block;
    width:40px;
    height:70px;
    line-height:70px;
    text-align:center;
    background:rgba(0,0,0,0.3);
    font-size:40px;
    color:#fff;
    border-radius:5px;
}
.left_arrow a:hover,.right_arrow a:hover{
    background:rgba(0,0,0,0.5);
}

/*下标样式*/
.sub {
    width: 435px;
    height: 7px;
    position: absolute;
    top: 380px;
    left: 400px;
}
.sub_ul li {
    width: 30px;
    height: 7px;
    background-color: #ccc;
    float: left;
    margin: 0 20px;
}
li.sub_li_bg{
    background-color:deeppink;
}

/**
 * Created by Administrator on 2017/8/12 0012.
 */

var i=0;
var timer;
$(function(){
    $(".img_circle_ul li").eq(0).show().siblings().hide();
    shouwtime();

    //鼠标移动上去（下标）图片轮播停止显示鼠标移上去的图片。
    $(".sub_ul li").hover(function(){
        i=$(this).index();
        showw();
        clearInterval(timer);
    },function(){
        showw();
    });
    //点击左右箭头前进或者后退
    $(".left_arrow").click(function(){
       clearInterval(timer);

        if(i==0){
            i=6;
        }
        i--;
        showw();
    });
    $(".right_arrow").click(function(){
        clearInterval(timer);
        if(i==5){
            i=-1;
        }
        i++;
        showw();
    });

    function showw(){
        $(".img_circle_ul li").eq(i).show().siblings().hide();
        //$(".img_circle_ul li").eq(i).fadeIn().siblings().fadeOut();//这个办法第二张图会显示出来
        //图片改变下标也随之改变
        $(".sub_ul li").eq(i).addClass("sub_li_bg").siblings().removeClass("sub_li_bg");
    }

    function  shouwtime(){
        timer=setInterval(function(){
            i++;
            if(i==6) {
                i=0;
            }
            showw();
        },2000);
    }

});