Rookie: I wrote a carousel code for reference. If you have a better way, you can leave me a message

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Carousel</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">
    <!--Carousel pictures-->
    <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>
    <!--Left and right arrows-->
    <div class="left_right_arrow">
        <div class="left_arrow"><a href="#"> < </a></div>
        <div class="right_arrow"><a href="#"> > </a></div>
    </div>
    <!--Subscript notation-->
    <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;
}
/* Overall style of the outer div */
.big_carousel{
    position:relative;
    width:1146px;
    height:400px;
    background-color:red;
    margin:0 auto;
}

/*arrow style*/

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

/*Subscript style*/
.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;
were hours;
$(function(){
    $(".img_circle_ul li").eq(0).show().siblings().hide();
    shouwtime();

    //Mouse up (subscript) picture carousel to stop displaying the picture on mouse up.
    $(".sub_ul li").hover(function(){
        i=$(this).index();
        showw();
        clearInterval(timer);
    },function(){
        showw();
    });
    //Click the left and right arrows to go forward or backward
    $(".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();//The second picture of this method will be displayed
        //The subscript of the picture changes and the subscript changes accordingly
        $(".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);
    }

});

Rookie: I wrote a carousel code for reference. If you have a better way, you can leave me a message

Guess you like