There are many ways to implement the rotation chart, but the structure of html is the same. This paper uses Jquery framework, which makes Dom operation more convenient and flexible

html part:

<div class="banner">
        <ul>
            <li><a href="javascript:;"><img src="Img/1.jpg" /></a></li>
            <li><a href="javascript:;"><img src="Img/2.jpg" /></a></li>
            <li><a href="javascript:;"><img src="Img/3.jpg" /></a></li>
            <li><a href="javascript:;"><img src="Img/4.jpg" /></a></li>
            <li><a href="javascript:;"><img src="Img/5.jpg" /></a></li>
        </ul>
        <div class="arrow">
            <span class="arrow-l"><</span>
            <span class="arrow-r">></span>
        </div>
        <ol>
            <li class="dot"></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ol>
</div>

CSS Code:

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body{
    background-color:#fff;
}
li{
    list-style:none;
}
.banner{
    width:800px;
    height:300px;
    margin:100px auto;
    position:relative;
}

.banner ul li{
    display:none;
    position:absolute;
}
.banner ul li:first-child{
    display:block;
}
.banner ul li a{
    display:block;
}
.banner ul li a img{
    width:800px;
    height:auto;
}

.arrow span {
    width:20px;
    height:30px;
    background:rgba(0,0,0,0.05);
    color:#fff;
    position:absolute;
    top:50%;
    transform:translate(0,-50%);
    line-height:30px;
    text-align:center;
    font-size:20px;
    cursor:pointer;
}
.arrow-l{
    left:20px;
}
.arrow-r{
    right:20px;
}
.banner ol{
    position:absolute;
    bottom:20px;
    right:60px;
}
.banner ol li {
    float: left;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: rgba(0,0,0,0.4);
    margin-left:12px;
    cursor:pointer;
    border:2px solid rgba(255,255,255,0.3);
}
.banner ol li.dot{
    border:2px solid rgba(0,0,0,0.4);
    background:#fff;
}

JS Code:

<script src="js/jquery.min.js"></script>
<script>
        //Toggle picture function
        function bannerImg(count,Img,dot) {
            //Let index be count Of li Element display,siblings Other li Element hiding
            $(Img).eq(count).stop("slow").fadeIn().siblings("li").stop().fadeOut("slow");
            //Toggles the small dot style of the current index
            $(dot).eq(count).addClass("dot").siblings("li").removeClass("dot");
        }

        $(function () {
            var count = 0;
            var banImg = $(".banner ul li");
            var bandot = $(".banner ol li");
            //Next piece
            $(".arrow-r").click(function () {
                count++;
                if (count == banImg.length) {
                    count = 0;
                }
                bannerImg(count, banImg, bandot);
            });
            //Last one
            $(".arrow-l").click(function () {
                count--;
                if (count < 0) {
                    count = banImg.length - 2;
                }
                bannerImg(count, banImg, bandot);
            });

            //Small dot controlled rotation
            $(bandot).click(function () {
                count = $(this).index();
                bannerImg(count, banImg, bandot);
            })

            //Timer rotation
            var adTimer;
            adTimer = setInterval(function () {
                count++;
                if (count == banImg.length) {
                    count = 0;
                }
                bannerImg(count, banImg, bandot);
            }, 3000);

            //Mouse in stop rotation
            $(".banner").mouseover(function () {
                clearInterval(adTimer);
            });
            //Mouse out to start rotation
            $(".banner").mouseout(function () {
                adTimer = setInterval(function () {
                    count++;
                    if (count == banImg.length) {
                        count = 0;
                    }
                    bannerImg(count, banImg, bandot);
                }, 3000);
            });
        }) 
</script>

The main part is JS, which needs to define a variable to control the image rotation through the index of li. Here I use Jquery's own animation fade in and fade out effect. Of course, you can also use the animate function to customize the animation according to your preferences. Fade in and fade out effect it doesn't smell.

Design sketch:

From: Xiao Zeng blog