详解原生JS实现走马灯轮播图_js 手动实现走马灯-优快云博客

本文详细介绍了如何从头开始创建一个基本的轮播图，包括设置图片、制作左右按钮、事件监听及轮播图的自动播放功能。通过IIFE避免全局污染，使用函数节流器解决快速点击问题，并提供了JavaScript完整代码示例。

通栏轮播图

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

重点：这里，尽量选择图片尺寸相同的图片，本文，我用4张不同尺寸的图片作demo演示给读者！
images文件夹

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

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

在这里插入图片描述

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

在这里插入图片描述

4.右按钮事件监听

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

我们在js文件夹中创建carousel.js文件，并在html文档中用script 的src属性引入
在js文件中优先书写IIFE,养成良好习惯，除特殊要求，只要书写js代码，就优先写IIFE！
回顾： IIFE的好处优点：

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

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

在这里插入图片描述
此时，我们可以看到五张图片，分别为：第一，二，三，四张图和与第一张相同的第五张图

右按钮设置事件监听
使用 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