PC 端网页轮播图

清疚 2023-09-26 10:39 60阅读 0赞

#### 文章目录 ####

*   *  一、案例分析
     *  二、结构搭建
     *  三、具体实现
     *   *  1.鼠标经过按钮时
         *  2.动态生成小圆圈
         *  3.点击圆圈换图片
         *  4.图片无缝滚动
         *  5.自动播放功能
     *  四、完整代码

### 一、案例分析 ###

轮播图也称为焦点图，是网页中比较常见的网页特效。  
功能需求：  
① 鼠标经过轮播图模块，左右按钮显示，离开则隐藏；  
② 点击右侧按钮，图片往左播放一张，左侧按钮同理；  
③ 图片播放的同时，下面小圆圈模块也跟着一起变化；  
④ 点击小圆圈，也可以播放相应的图片；  
⑤ 鼠标不经过轮播图，轮播图也会自动播放图片；  
⑥ 鼠标经过轮播图模块，自动播放停止。

### 二、结构搭建 ###

//html文档
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <link href="网页轮播图.css" rel="stylesheet"/>
    </head>
    <body>
        <div class="focus">
            <a href="#" class="arrow-l"><img src="picture//左箭头.png"/></a>
            <a href="#" class="arrow-r"><img src="picture//右箭头.png"/></a>
            <ul class="picture">
                <li>
                    <a href="#"><img src="picture//图1.jpg"/></a>
                </li>
                <li>
                    <a href="#"><img src="picture//图2.jpg"/></a>
                </li>
                <li>
                    <a href="#"><img src="picture//图3.jpg"/></a>
                </li>
                <li>
                    <a href="#"><img src="picture//图4.jpg"/></a>
                </li>
            </ul>
            <ol class="circle">
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ol>
        </div>
    </body>
    </html>

* {
        
        margin: 0;
        padding: 0;
    }
    .focus {
        
        position: relative;
        width: 600px;
        height: 370px;
        margin: 100px auto;
        background-color: rgb(255, 119, 0);
    }
    .arrow-l,.arrow-r {
        
        display: block;
        width: 37px;
        height: 56px;
        text-decoration: none;
        z-index: 3;
        background-color: rgb(2, 2, 2);
        opacity: 0.5;
    
    }
    .arrow-l {
        
        position: absolute;
        left: 0;
        top: 160px;
    }
    .arrow-l img {
        
        width: 32px;
        height: 40px;
        margin: 8px auto;
    }
    .arrow-r {
        
        position: absolute;
        right: 0;
        top: 160px;
    }
    .arrow-r img {
        
        width: 32px;
        height: 40px;
        margin: 8px auto;
    }
    .picture img {
        
        width: 600px;
        height: 370px;
    }
    .picture {
        
        position: absolute;
        left: 0;
        top: 0;
        width: 400%;
    }
    .picture li {
        
        list-style: none;
        float: left;
    }
    .circle {
        
        position: absolute;
        bottom: 12px;
        left: 270px;
        list-style-type: none;
    }
    .circle li {
        
        float: left;
        width: 9px;
        height: 9px;
        background-color: aliceblue;
        margin: 0 3px;
        border-radius: 50%;
        cursor: pointer;
    }
    .circle .current {
        
        background-color: rgb(16, 136, 242);
    }

运行结果：  
![在这里插入图片描述][9bd6da22b71f429daf3520e4d42af0db.png_pic_center]

### 三、具体实现 ###

#### 1.鼠标经过按钮时 ####

在此之前记得先给按钮的 display 设为 none！

var arrow_l = document.querySelector('.arrow-l');
    var arrow_r = document.querySelector('.arrow-r');
    var focus = document.querySelector('.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';
    })

#### 2.动态生成小圆圈 ####

有时候图片数量是不确定的，我们更希望它能够动态地生成这些小圆圈，而不需要手动添加，让小圆圈的数量跟着图片的数量走！  
① 小圆圈的个数要跟图片张数一致；  
② 所以首先先得到 ul 里面图片的张数，也就是 li 的个数；  
③ 利用循环，动态生成小圆圈，然后将小圆圈放入 ol 里面；  
④ 创建节点 createElement(‘li’)，插入节点 ol.appendChild(li)；  
⑤ 第一个小圆圈默认为选中颜色。

var picture = document.querySelector('.picture');
        var circle = document.querySelector('.circle');
        for (var i = 0; i < picture.children.length; i++) {
        
            var li = document.createElement('li');
            circle.appendChild(li);
        }
        circle.children[0].className = 'current';

#### 3.点击圆圈换图片 ####

① 此时用到 animate 动画函数，需要将 js 文件引入页面中；  
② 因为 index.js 依赖 animate.js，所以动画函数文件要写到 index.js 前面；  
③ 使用动画函数的前提是，该元素必须有定位，所以我们给 ul 添加定位（注意是 ul 移动 而不是 li）；  
④ 核心算法，小圆圈的**索引号乘以图片的宽度**作为 ul 移动的距离；  
⑤ 此时需要知道小圆圈的索引号，我们可以在生成小圆圈的时候给它设置一个自定义属性，点击的时候获取自定义属性的值就可以了；  
⑥ 上一步动态生成小圆圈的同时，顺便给它添加点击事件， 所以此处代码可以写在我们上一步动态生成小圆圈的 for 循环里面。

li.setAttribute('index', i);
    li.addEventListener('click', function() {
        
                for (var i = 0; i < circle.children.length; i++) {
        
                circle.children[i].className = '';         
                }
                this.className = 'current';
                var focusWidth = focus.offsetWidth;
                var index = this.getAttribute('index');
                animate(picture, -index * focusWidth);
            })

运行结果：  
![在这里插入图片描述][e801c8aba2bf4898a62cfdaf04a06458.png_pic_center]

#### 4.图片无缝滚动 ####

① 点击右侧按钮一次，就让图片滚动一张，左侧按钮同理；  
② 声明一个变量 num，每点击一次 num 就自增1，然后让这个变量乘以图片的宽度，就是 ul 滚动的距离；  
③ 把 ul 的第一个 li 复制一份，放到 ul 的最后面；  
④ 当图片滚动到克隆的最后一张图片时，让 ul 快速地、不做动画地跳到最左侧，left 为0；  
⑤ 同时 num 赋值为0，可以重新开始滚动。  
⑥ 点击按钮同时，小圆圈也跟着滚动；  
⑦ 再声明一个变量 j，每次点击自增1，注意左侧按钮也需要这个变量，因此要声明全局变量；  
⑧ 为了避免图片切换太快，我们需要设置一个节流阀，待动画执行完毕，利用回调函数，添加一个变量 flag 控制函数的上锁和解锁。

#### 5.自动播放功能 ####

① 添加一个定时器；  
② 自动播放轮播图，实际上就类似于点击了右侧按钮；  
③ 核心思路，此时我们可以手动调用右侧按钮点击事件 **arrow\_r.click()**；  
④ 鼠标经过 focus 就停止计时，鼠标离开就开启定时器。

var timer = setInterval(function() {
        
            arrow_r.click();
        }, 2000);

### 四、完整代码 ###

下面是该案例完整的代码！

**① 网页轮播图.html**

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <link href="网页轮播图.css" rel="stylesheet"/>
        <script src="侧滑动画.js" rel="stylesheet"></script>
        <script src="网页轮播图.js" rel="stylesheet"></script>
    </head>
    <body>
        <div class="focus">
            <a href="javascript:;" class="arrow-l"><img src="picture//左箭头.png"/></a>
            <a href="javascript:;" class="arrow-r"><img src="picture//右箭头.png"/></a>
            <ul class="picture">
                <li>
                    <a href="javascript:;"><img src="picture//图1.jpg"/></a>
                </li>
                <li>
                    <a href="javascript:;"><img src="picture//图2.jpg"/></a>
                </li>
                <li>
                    <a href="javascript:;"><img src="picture//图3.jpg"/></a>
                </li>
                <li>
                    <a href="javascript:;"><img src="picture//图4.jpg"/></a>
                </li>
            </ul>
            <ol class="circle">
            </ol>
        </div>
    </body>
    </html>

**② 网页轮播图.css**

* {
        
        margin: 0;
        padding: 0;
    }
    .focus {
        
        position: relative;
        width: 600px;
        height: 370px;
        margin: 100px auto;
        overflow: hidden;
        background-color: rgb(255, 119, 0);
    }
    .arrow-l,.arrow-r {
        
        display: none;
        width: 37px;
        height: 56px;
        text-decoration: none;
        z-index: 3;
        background-color: rgb(2, 2, 2);
        opacity: 0.5;
    
    }
    .arrow-l {
        
        position: absolute;
        left: 0;
        top: 160px;
    }
    .arrow-l img {
        
        width: 32px;
        height: 40px;
        margin: 8px auto;
    }
    .arrow-r {
        
        position: absolute;
        right: 0;
        top: 160px;
    }
    .arrow-r img {
        
        width: 32px;
        height: 40px;
        margin: 8px auto;
    }
    .picture img {
        
        width: 600px;
        height: 370px;
    }
    .picture {
        
        position: absolute;
        left: 0;
        top: 0;
        width: 500%;
    }
    .picture li {
        
        list-style: none;
        float: left;
    }
    .circle {
        
        position: absolute;
        width: 200px;
        height: 20px;
        left: 8px;
        bottom: 4px;
        list-style-type: none;
    }
    .circle li {
        
        float: left;
        width: 9px;
        height: 9px;
        margin: 0 3px;
        background-color: aliceblue;
        border-radius: 50%;
        cursor: pointer;
    }
    .circle .current {
        
        background-color: rgb(16, 136, 242);
    }

**③ 侧滑动画.js**

**④ 网页轮播图.js**

运行结果：  
![在这里插入图片描述][882ebb1cd8ed48798059984218b4ba04.png_pic_center]

[9bd6da22b71f429daf3520e4d42af0db.png_pic_center]: https://img-blog.csdnimg.cn/9bd6da22b71f429daf3520e4d42af0db.png#pic_center
[e801c8aba2bf4898a62cfdaf04a06458.png_pic_center]: https://img-blog.csdnimg.cn/e801c8aba2bf4898a62cfdaf04a06458.png#pic_center
[882ebb1cd8ed48798059984218b4ba04.png_pic_center]: https://img-blog.csdnimg.cn/882ebb1cd8ed48798059984218b4ba04.png#pic_center