JS简单实现京东网页轮播图

需要html,css，js，

源代码

HTML

<div class="box">

        <!-- 左右两个点击按钮 -->

        <a href="javaScript:;" class="leftBtn"><b>&lt</b></a>

        <a href="javaScript:;" class="rightBtn"><b>&gt</b></a>

        <!-- 轮播图 -->

        <ul class="imgList">

            <li><img src="./images/1e4bae3d165b7d5e.jpg.webp" alt=""></li>

            <li><img src="./images/4698326cac3630e0.jpg.webp" alt=""></li>

            <li><img src="./images/8a3012115f1bdc6f.jpg.webp" alt=""></li>

            <li><img src="./images/aab57512633dea92.jpg.webp" alt=""></li>

            <li><img src="./images/q (1).jpg" alt=""></li>

            <li><img src="./images/q (2).jpg" alt=""></li>

            <li><img src="./images/1.jpg" alt=""></li>

            <li><img src="./images/123.jpg" alt=""></li>

            

        </ul>

        <!-- 小圆圈 -->

        <ol class="circle">

        </ol>

    </div>

CSS样式

<style>

        * {

            margin: 0;

            padding: 0;

        }

 

        .box {

            width: 590px;

            height: 441px;

            background-color: salmon;

            margin: 50px auto;

            position: relative;

            z-index: 99;

            overflow: hidden;

        }

 

        .imgList {

            position: absolute;

            list-style: none;

            width: 800%;

            left: 0;

            top: 0;

        }

 

        .imgList li {

            float: