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>
            <!-- 小圆点滚动显示 -->
            <ol>
                <li></li>
                <li class="current"></li>
                <li></li>
            </ol>
        </div>
</div>

此时页面长这样：

•  为了让它横向排列，给li加上浮动即可。【前提：ul要足够宽才行】。补充好css：

        * {
            /* 清除边框 */
            margin: 0;
            padding: 0;
        }
        .focus {
            position: relative;
            width: 500px; //这里我根据图片的宽高进行的设定
            height: 370px;
            margin: 100px auto;
            background-color: purple;
            overflow: hidden;
        }
        .focus ul {
            position: absolute;
            top: 0;
            left: 0;
            width: 400%; //需要给ul宽度，一般是有多少张图，就多少个百分比。这里写了四张图的位置。
        }
        .focus ul li {
            float: left;//让li浮动
            list-style: none;//去除li的·样式
        }

02.轮播图模块细分

细分情况：

1. 鼠标放在图片上，显示左右按钮，离开则不显示。
2. 点击左右按钮的时候可以显示不同图片。
3. 上下点击图片时，小圆圈按钮也会跟着变化。
4. 点击小圆圈按钮，也可以切换图片。
5. 不点击图片，图片也能自动切换到下一张图。当鼠标放上去时，自动播放停止。
6. 含有自动播放，但没有添加节流操作。【本篇未写节流操作】

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

<title>大盒子</title>
    <link rel="stylesheet" href="index.css">
    <!-- 引入js文件 -->
<script src="./index.js"></script>
......
    <div class="main">
        <div class="focus">
            <!-- 左侧按钮 -->
            <a href="#" class="arrow-l">&lt;</a>
            <!-- 右侧按钮 -->
       <a href="#" class="arrow-r">&gt;</a>
......
</div>

• Css部分:

.arrow-l,
.arrow-r {
    display: none;
    position: absolute;
    top: 50%;
    margin-top: -20px;
    width: 24px;
    height: 40px;
    background: rgba(0, 0, 0, 0.3);
    text-align: center;
    line-height: 40px;
    color: #fff;
    font-family: 'icomoon';
    font-size: 18px;
    z-index: 2;//
}

JS部分：

// 等页面全部加载完之后再加载js,在这里添加load事件
window.addEventListener('load', function() {
    //1.获取元素
    var arrow_l = document.querySelector('.arrow-l');
    var arrow_r = document.querySelector('.arrow-r');
    var focus = document.querySelector('focus');
    //2.鼠标经过focus就显示隐藏左右按钮
    focus.addEventListener('mouseenter', function() {
        arrow_l.style.display = 'block';
        arrow_r.style.display = 'block';
    })
    focus.addEventListener('mouseleave', function() {
        arrow_l.style.display = 'none';
        arrow_r.style.display = 'none';
    })
})

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

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

思路：小圆圈的个数要跟图片张数一致，先得到ul里面图片的张数（图片在li中，所以也为li的个数）。

•         创建节点：createElement(‘li’)
  •         插入节点：ol.appendChild(li)

          <!-- 小圆点滚动显示 -->
            <ol class="circle">
            </ol>

Css部分：

.circle {
    position: absolute;
    bottom: 10px;
    left: 50px;
}
.circle li {
    float: left;
    width: 8px;
    height: 8px;
    /*background-color: #fff;*/
    border: 2px solid rgba(25, 88, 9, 0.5);
    margin: 0 3px;