JS实例——手写网页轮播图

目录

01.轮播图准备

02.轮播图模块细分

03.鼠标放在图片上，显示左右按钮，离开则不显示。

04.利用循环，动态生成小圆圈（放在li里的）

04.1 小圆圈排他思想

05.点击小圆圈，移动图片(即移动ul)

06.点击右侧按钮一次，就让图片滚动一张。

06.1 图片无缝滚动的原理

07.克隆第一张图片

08.小圆圈跟随右侧按钮一起变化

09.轮播图的两个小bug

09.1 点击小li，再点击右侧按钮，图片跳转出错并且小圆圈没正常跳转

09.1.1 图片跳转出错

09.1.2 图片跳转了，小圆圈没正常跳转

10.写左侧按钮的js

12.完整代码

index.html部分

index.css部分

index.js部分

---

本篇文章实现的网页轮播图网址展示：网页轮播图

图片展示： 

01.轮播图准备

需要准备四个模块：

1. 一个大的盒子进行包裹（main）、（focus f1）
2. 左右元素按钮（arrow-l、arrow-r）
3. 小圆点滚动显示（circle）
4. 核心滚动模块图片

<div class="main">
        <div class="focus">
            <!-- 左侧按钮 -->
            <a href="#" class="arrow-l">&lt;</a>
            <!-- 右侧按钮 -->
            <a href="#" class="arrow-r">&lt;</a>
            <!-- 核心滚动区域 -->
            <ul>
                <li>
                    <a href="#"><img src="./green02.jpg" alt=""></a>
                </li>
                <li>
                    <a href="#"><img src="./green03.jpg" alt=""></a>
                </li>
                <li>
                    <a href="#"><img src="./green05.jpg" alt=""></a>
                </li>
            </ul>
            <!-- 小