PC 端网页轮播图

栈老师不回家

已于 2022-10-10 15:54:28 修改

阅读量1.2k

点赞数 4

分类专栏： JavaScript 文章标签： css html css3

于 2022-10-10 12:22:36 首次发布

本文链接：https://blog.csdn.net/m0_52861684/article/details/127224298

版权

JavaScript 专栏收录该内容

18 篇文章 1 订阅

订阅专栏

文章目录

一、案例分析

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

二、结构搭建

//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);
}

运行结果：
在这里插入图片描述

三、具体实现

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);
        })

运行结果：
在这里插入图片描述

4.图片无缝滚动

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

    var first = picture.children[0].cloneNode(true);
    picture.appendChild(first);   
    arrow_r.addEventListener('click', function() {
        if (num == (picture.children.length - 1)) {
            picture.style.left = 0;
            num = 0;
        }
        num++;
        animate(picture, -num * focusWidth);
        j++;
        if (j == circle.children.length) {
            j = 0;
        }
        circleChange();
    })

    arrow_l.addEventListener('click', function() {
        if (num == 0) {
            num = picture.children.length - 1;
            picture.style.left = -num * focusWidth + 'px';
        }
        num--;
        animate(picture, -num * focusWidth);
        j--;
        if (j < 0) {
            j = circle.children.length - 1;
        }
        circleChange();
    })
    function circleChange() {
        for (var i = 0; i < circle.children.length; i++) {
            circle.children[i].className = '';
        }
        circle.children[j].className = 'current';
    }

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

    function animate(obj, target, callback) {
        clearInterval(obj.timer); 
        obj.timer = setInterval(fn, 4);
        function fn() {
            var step = (target - obj.offsetLeft) / 10;
            step = step > 0 ? Math.ceil(step) : Math.floor(step);
            if (obj.offsetLeft == target) {
                clearInterval(obj.timer);
                if (callback) {
                    callback();
                }
            }
            obj.style.left = obj.offsetLeft + step + 'px';
        }
    }

④ 网页轮播图.js

window.addEventListener('load',function() {
    //1.鼠标经过时，左右箭头按钮显示，离开则隐藏
    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';
        clearInterval(timer);
        timer = null;
    })
    focus.addEventListener('mouseleave', function() {
        arrow_l.style.display = 'none';
        arrow_r.style.display = 'none';
        timer = setInterval(function() {
            arrow_r.click();
        }, 2000);
    })
    //2.动态生成小圆圈，有几张图片，就生成几个小圆圈
    var picture = document.querySelector('.picture');
    var circle = document.querySelector('.circle');
    var focusWidth = focus.offsetWidth;
    var num = 0;
    var j = 0;
    for (var i = 0; i < picture.children.length; i++) {
        var li = document.createElement('li');
        li.setAttribute('index', i);
        circle.appendChild(li);
        //3.点击小圆圈颜色改变，同时图片跟着切换
        li.addEventListener('click', function() {
            for (var i = 0; i < circle.children.length; i++) {
            circle.children[i].className = '';         
            }
            this.className = 'current';
            var index = this.getAttribute('index');
            num = index;
            j = index;
            animate(picture, -index * focusWidth);
        })
    }
    circle.children[0].className = 'current'; 
    //4.点击右键按钮图片向左滑动一张，同时小圆圈跟着变化，左键同理
    var first = picture.children[0].cloneNode(true);
    picture.appendChild(first);   
    var flag = true;
    arrow_r.addEventListener('click', function() {
        if(flag) {
            flag = false;
            if (num == (picture.children.length - 1)) {
                picture.style.left = 0;
                num = 0;
            }
            num++;
            animate(picture, -num * focusWidth, function() {
                flag = true;
            });
            j++;
            if (j == circle.children.length) {
                j = 0;
            }
            circleChange();
        }
    })

    arrow_l.addEventListener('click', function() {
        if (flag) {
            flag = false;
            if (num == 0) {
                num = picture.children.length - 1;
                picture.style.left = -num * focusWidth + 'px';
            }
            num--;
            animate(picture, -num * focusWidth, function() {
                flag = true;
            });
            j--;
            if (j < 0) {
                j = circle.children.length - 1;
            }
            circleChange();
        }
    })
    function circleChange() {
        for (var i = 0; i < circle.children.length; i++) {
            circle.children[i].className = '';
        }
        circle.children[j].className = 'current';
    }
    //5.使用定时器，自动播放图片
    var timer = setInterval(function() {
        arrow_r.click();
    }, 2000);
})