2021-05-04 淘宝轮拨图的实现思路和完整代码

需求

1.实现鼠标移入移出时左右键的显示和隐藏
2.点击左键实现切换到上一张,点击右键切换下一张
3.点击序号12345的小图标可以切换到对应的第几张图片,并且当前图片对应的序号被选中(变颜色)
4.没有鼠标点击时可以实现自动播放

代码

body

<div class="all" id="box">
    <div id="screen" class="screen">
        <ul>
            <li><img src="./pic/a.png" alt=""></li>
            <li><img src="./pic/b.png" alt=""></li>
            <li><img src="./pic/c.png" alt=""></li>
            <li><img src="./pic/d.png" alt=""></li>
            <li><img src="./pic/e.png" alt=""></li>
        </ul>
        <ol></ol>
    </div>
    <div id="arr">
        <span id="left">&lt;</span>
        <span id="right">&gt;</span>
    </div>
</div>

css

        * {
   
            padding: 0;
            margin