详解原生JS做一个走马灯轮播图

站长

2022年12月03日 00:00 · 阅读数 73

通栏轮播图

1. 在images文件夹中预置轮播图图片

重点：这里，尽量选择图片尺寸相同的图片，本文，我用4张不同尺寸的图片作demo演示给读者！详解原生JS做一个走马灯轮播图

2.在Index文件中写出轮播图基本框架

（尽量使用相同规模的图片）将图片设置为相同规模后，左浮动依次排开，设置css样式，此部分省略，代码如图此部分过于简单，不展示

详解原生JS做一个走马灯轮播图

3.制作左右按钮，并将左右按钮绝对定位于合适的位置

详解原生JS做一个走马灯轮播图

4.右按钮事件监听

由于轮播图移动时，最后一张图片点击右按钮后需要及时切换为第一张，所以这里，我们需要一个假的第一张图片，放置在最后，使最后一张图片为第一张图片的假图！在JS文件中，克隆第一张图片，并将其使用appendChild方法追加到最后！

我们在js文件夹中创建carousel.js文件，并在html文档中用script 的src属性引入

2.特别注意：在js文件中优先书写IIFE,养成良好习惯，除特殊要求，只要书写js代码，就优先写IIFE！ 3. 回顾： IIFE的好处优点：

IIFE中定义的任何变量和函数，都会在执行结束时被销毁。适合做初始化工作。创建块级（私有）作用域，避免了向全局作用域中添加变量和函数，因此也避免了多人开发中全局变量和函数的命名冲突。 IIFE中定义的任何变量和函数，都会在执行结束时被销毁。这种做法可以减少闭包占用的内存问题，因为没有指向匿名函数的引用。只要函数执行完毕，就可以立即销毁其作用域链。

用appendChild追加图片，代码如下如下：

详解原生JS做一个走马灯轮播图此时，我们可以看到五张图片，分别为：第一，二，三，四张图和与第一张相同的第五张图

右按钮设置事件监听 使用 onclick 点击事件监听，当用户点击时，将carousel（轮播图向右移动！） 细节内容请看代码注释： 定义右按钮后，设置事件监听将图片设置编号，0，1，2，3，4，并当图片编号为4 的时候，设置定时器，解除过渡属性，将图片瞬间切换为第一张图片！

代码如下：（不会写的同学，可以对照！）

(function(){
    var carousel = document.getElementById('carousel');
    var right_btn = document.getElementById('right_btn');
    var left_btn = document.getElementById('left_btn');
    //克隆
    var clone_img = carousel.firstElementChild.cloneNode(true);
    //追加图片
    carousel.appendChild(clone_img);

    //第一张图片编号为n = 0;
    n = 0;
    right_btn.onclick = function(){
        //设置过渡属性，防止过渡属性被清除
        carousel.style.transition = 'all 0.5s ease 0s';
        n++;//图片编号加一
        carousel.style.transform = 'translateX('+-20*n+'%)';
        console.log(n);
        //判断，当图片为最后一张图片时，设置定时器，当上一个动画完成后再拉回！解除过渡属性，并将图片拉回至第一张图片
        if(n == 4){
            //定时器设置0.5S，上一个过度属性刚好完成
            setTimeout(function(){
                //解除过渡属性
                carousel.style.transition = 'none';
                //回到第一张图片
                carousel.style.transform = 'none';
            },500);
            n = 0;
        }
    }
})();

5.本文重难点：左按钮事件监听

同理，如右按钮写左按钮代码。学会妙用0s延时器，0s定时器会在其他语句完成后再执行，确保过渡属性在图片拉回至最后一张时再添加过渡并移动至第四张图片。本文重难点：左按钮的事件监听 详解原生JS做一个走马灯轮播图不会的同学，可以参考我的demo 代码如下：

left_btn.onclick = function () {
        //设置过渡属性
        carousel.style.transition = 'all 0.5s ease 0s';
        
        if (n == 0) {
            //检测图片为最后一张时，解除过渡属性，并将图片瞬间拉至最后一张
            carousel.style.transition = 'none';
            //回到最后一张
            carousel.style.transform = 'translateX(' + -20 * 4 + '%)';
            //此处延时器妙用！设置0s的延时器会等待其他语句完成后再运行，完美展现出一个丝滑的轮播图
            setTimeout(function () {
                n = 3;
                //拉至第四张图
                carousel.style.transition = 'all 0.5s ease 0s';
                carousel.style.transform = 'translateX(' + -20 * n + '%)';
            }, 0)
        } else {
            n--;
            //如果不是第一张图片，就正常移动
            carousel.style.transform = 'translateX(' + -20 * n + '%)';
        }
    }

6.基本的轮播图

至此为止，基本的轮播图已经实现，希望你们已经掌握了一个轮播图的基本框架，觉得好文点赞关注支持一下吧！如果有任何疑问，可以私信留言给我，或者评论，我回复你！感谢支持！

7.进阶知识——节流器

肯定有细心的读者会发现，当快速多次点击按钮时，图片切换速度过快，眼花缭乱，我们面对这种情况，可以采用函数节流器，当点击事件发生时，节流器处于关闭状态，当事件结束后，节流器再次打开，此时才可以发生下一次按钮点击事件。 这里我们用右按钮举例 定义一个 var lock = true；节流锁，当函数运行时，节流锁关闭，无法重复激活点击事件！从而达到函数节流的效果 详解原生JS做一个走马灯轮播图惯例：不会的同学，可以参考我的代码演示：

	var lock = true;
    right_btn.onclick = function () {

        //判断，若锁为关闭状态则直接退出函数
        if (!lock) return;
        //若开启，则关闭
        lock = false;

        //设置过渡属性，防止过渡属性被清除
        carousel.style.transition = 'all 0.5s ease 0s';
        n++; //图片编号加一
        carousel.style.transform = 'translateX(' + -20 * n + '%)';
        //判断，当图片为最后一张图片时，设置延时器，当上一个动画完成后再拉回！解除过渡属性，并将图片拉回至第一张图片
        if (n == 4) {
            //延时器设置0.5S，上一个过度属性刚好完成
            setTimeout(function () {
                //解除过渡属性
                carousel.style.transition = 'none';
                //回到第一张图片
                carousel.style.transform = 'none';
            }, 500);
            n = 0;
        }

        //在500ms,函数执行结束后再次将锁打开！
        setTimeout(function () {
            lock = true;
        }, 500);

    }

8.进阶知识2——轮播图自动播放

在很多网站上的轮播，并不是固定不动的，而是会自动播放其实轮播图自动播放一样很简单，作者带着大家手把手“拿捏它”！

/doge 手动狗头~~/doge 详解原生JS做一个走马灯轮播图 重难点：每次设置一个定时器时，一定要注意清除之前的定时器，防止资源大量占用！ 一定要先定义banner ，不然直接写代码是不会生效的！

demo 如下：

//轮播图自动播放
    timer = setInterval(right_move,2000);
    //鼠标移入时，轮播图暂停播放
    banner.onmouseenter = function(){
        clearInterval(timer)
    }

    //鼠标移出时，轮播图继续播放
    banner.onmouseleave = function(){
        //每次设置一个定时器时，一定要注意清除之前的定时器，防止资源大量占用！
        clearInterval(timer);
        timer = setInterval(right_move,2000);
    }

## 附录： Javascript全部代码如下：

(function () {
    var banner = document.getElementById('banner')
    var carousel = document.getElementById('carousel');
    var right_btn = document.getElementById('right_btn');
    var left_btn = document.getElementById('left_btn');
    //克隆
    var clone_img = carousel.firstElementChild.cloneNode(true);
    //追加图片
    carousel.appendChild(clone_img);

    //第一张图片编号为n = 0;
    n = 0;
    //定义函数节流锁
    var lock = true;
    right_btn.onclick = right_move();
    function right_move() {

        //判断，若锁为关闭状态则直接退出函数
        if (!lock) return;
        //若开启，则关闭
        lock = false;

        //设置过渡属性，防止过渡属性被清除
        carousel.style.transition = 'all 0.5s ease 0s';
        n++; //图片编号加一
        carousel.style.transform = 'translateX(' + -20 * n + '%)';
        //判断，当图片为最后一张图片时，设置定时器，当上一个动画完成后再拉回！解除过渡属性，并将图片拉回至第一张图片
        if (n == 4) {
            //定时器设置0.5S，上一个过度属性刚好完成
            setTimeout(function () {
                //解除过渡属性
                carousel.style.transition = 'none';
                //回到第一张图片
                carousel.style.transform = 'none';
            }, 500);
            n = 0;
        }

        //在500ms,函数执行结束后再次将锁打开！
        setTimeout(function () {
            lock = true;
        }, 500);

    }

    left_btn.onclick = function () {

        if (!lock) return;
        lock = false;

        //设置过渡属性
        carousel.style.transition = 'all 0.5s ease 0s';

        if (n == 0) {
            //检测图片为最后一张时，解除过渡属性，并将图片瞬间拉至最后一张
            carousel.style.transition = 'none';
            //回到最后一张
            carousel.style.transform = 'translateX(' + -20 * 4 + '%)';
            //此处定时器妙用！设置0s的定时器会等待其他语句完成后再运行，完美展现出一个丝滑的轮播图
            setTimeout(function () {
                n = 3;
                //拉至第四张图
                carousel.style.transition = 'all 0.5s ease 0s';
                carousel.style.transform = 'translateX(' + -20 * n + '%)';
            }, 0)
        } else {
            n--;
            //如果不是第一张图片，就正常移动
            carousel.style.transform = 'translateX(' + -20 * n + '%)';
        }

        setTimeout(function () {
            lock = true;
        }, 500);

    }

    //轮播图自动播放
    timer = setInterval(right_move,2000);
    //鼠标移入时，轮播图暂停播放
    banner.onmouseenter = function(){
        clearInterval(timer)
    }

    //鼠标移出时，轮播图继续播放
    banner.onmouseleave = function(){
        //每次设置一个定时器时，一定要注意清除之前的定时器，防止资源大量占用！
        clearInterval(timer);
        timer = setInterval(right_move,2000);
    }
})();

文章末尾，首先，很感谢你能读到最后！看完本文，读者肯定已经对轮播图有了深刻的了解！希望大家多多支持，点赞关注一下！期待下一期！若有任何疑问，都可以评论区留言，或者私信留言，本人会回复！

2022.5.8 晴🌤 作者：胜利111

转载自:https://juejin.cn/post/7096283959037788168