css部分代码

        *{margin: 0;padding:0; }
        ul{list-style: none;}
        .banner{width: 500px;height: 300px;border: 2px solid #ccc;margin: 100px auto;position: relative;overflow: hidden;z-index: 1;}
        .img{position: absolute;top: 0;left: 0;}
        .img li{float: left;}
        .num{position: absolute;bottom: 10px;width: 100%;text-align: center;font-size: 0;}
        .num li{width: 10px;height: 10px;background:rgba(0,0,0,0.5);border-radius: 100%;display: inline-block;margin: 0 5px;cursor: pointer;}
        .btn{display: none;}
        .btn span{display: block;width: 50px;height: 50px;background: black;color: #fff;font-size: 40px;line-height: 50px;text-align: center;cursor:pointer;opacity: 0.3;}
        .btn .prev{position: absolute;left: 0;top: 50%;margin-top: -50px;}
        .btn .next{position: absolute;right: 0;top: 50%;margin-top: -50px;}
        .num .active{background-color: #fff;}
        .hide{display: none;}

body部分代码

<div class="banner">
    <ul class="img">
        <li><a href="#"><img width="600" height="300" src="https://img20.360buyimg.com/pop/s590x470_jfs/t1/92910/12/14178/100907/5e6112a0E100a47b8/cfffd1867a383ba2.jpg.webp" alt=""></a></li>
        <li><a href="#"><img width="600" height="300" src="https://img30.360buyimg.com/da/s590x470_jfs/t1/104217/29/15198/80925/5e6f48dcE78f8d546/de4289ce2eba1562.jpg.webp" alt=""></a></li>
        <li><a href="#"><img width="600" height="300" src="https://img12.360buyimg.com/pop/s590x470_jfs/t1/104416/39/14375/333280/5e64b55fEd2493dcb/e376b81cfd9fa761.jpg.webp" alt=""></a></li>
        <li><a href="#"><img width="600" height="300" src="https://imgcps.jd.com/ling/4170923/5bGF5a625aW954mp5a6I5oqk/MuS7tjnmipggM-S7tjjmipg/p-5bd8253082acdd181d02fa6d/6c47a08a.jpg" alt=""></a></li>
        <li><a href="#"><img width="600" height="300" src="https://img12.360buyimg.com/pop/s590x470_jfs/t1/110672/35/8977/191973/5e6ee5d9E42b8d9f4/4162e8a5fcc16d03.png.webp" alt=""></a></li>
    </ul>
    <ul class="num"></ul>
    <div class="btn">
        <span class="prev"><</span>
        <span class="next">></span>
    </div>
</div>

js部分代码

<script src="../../jquery.js"></script>
<script>
    $(function(){
        var i=0;
        var timer=null;
        for (var j = 0; j < $('.img li').length; j++) { 
            $('.num').append('<li></li>')
        }
        $('.num li').first().addClass('active'); 
        var firstimg=$('.img li').first().clone();
        $('.img').append(firstimg).width($('.img li').length*($('.img img').width()));
        $('.des').width($('.img li').length*($('.img img').width()));
        $('.next').click(function(){
            i++;
            if (i==$('.img li').length) {
                i=1; 
                $('.img').css({left:0}); 
            };
            $('.img').stop().animate({left:-i*600},300);
            if (i==$('.img li').length-1) {
                $('.num li').eq(0).addClass('active').siblings().removeClass('active');
                $('.des li').eq(0).removeClass('hide').siblings().addClass('hide');
            }else{
                $('.num li').eq(i).addClass('active').siblings().removeClass('active');
                $('.des li').eq(i).removeClass('hide').siblings().addClass('hide');
            }
        })
        $('.prev').click(function(){
            i--;
            if (i==-1) {
                i=$('.img li').length-2;
                $('.img').css({left:-($('.img li').length-1)*600});
            }
            $('.img').stop().animate({left:-i*600},300);
            $('.num li').eq(i).addClass('active').siblings().removeClass('active');
            $('.des li').eq(i).removeClass('hide').siblings().addClass('hide');
        })
        $('.banner').hover(function(){
            $('.btn').show();
        },function(){
            $('.btn').hide();
        })
    })
</script>

效果图