原生JavaScript轮播图功能的实现_javascript图片轮播代码

 效果呈现

 HTML代码：

 class = "current" 用于定位当前显示图片所在位置

CSS代码：

 

JavaScript代码：

1.首先获取每张图片的小点和每张图片

const dots = Array.from(document.querySelectorAll(".dot a"))

const imgArray = Array.from(document.querySelectorAll(".img-list li"))

 Array.from() 静态方法从可迭代或类数组对象创建一个新的浅拷贝的数组实例。

可以将获取到的“点”和“图片”转为数组格式存储至 dots 和 imgArray 中。方便使用

document.querySelectorAll ——返回与指定的选择器组匹配的文档中的元素列表 (使用深度优先的先序遍历文档的节点)。返回的对象是 NodeList 。

查找网页中所有指定的选择器的元素列表。例如document.querySelectorAll(".dot a")是查找文档中所有class属性名为"dot"中包含的 "a" 的所有元素列表。

2.新建 changeImg 函数，用于切换图片

const prve = document.getElementById("prev")

const next = document.getElementById("next")

1. 2.1获取到网页中的“上一个”和“下一个”按钮。并生成各自的点击响应事件 。利用changeImg函数传入"pre"和"next"识别切换的上一张或下一张图片

 changeImg函数的实现：

利用上一张和下一张切换图片实现：

changeImg(dir)：dir是形参，用于判断传入用户点击的按钮是上一张还是下一张

querySelector() 方法返回文档中与指定选择器或选择器组匹配的第一个 Element对象。如果找不到匹配项，则返回null。

document.querySelector(".img-list .current")：利用指定的选择器current获取当前显示的图片

let next

            if (dir === "next") {

                next = current.nextElementSibling || imgArray[0]

            } else if (dir === "prev") {

                next = current.previousElementSibling || imgArray.at(-1)

            } else if (typeof (dir) === "number") {

                next = imgArray[dir]

            }

设置一个"next"变量，判断传入的是next还是prev

 nextElementSibling 返回当前元素在其父元素的子元素节点中的后一个元素节点，如果该元素已经是最后一个元素节点，则返回 null, 该属性是只读的。

current.nextElementSibling：改变当前current为当前图片的下一张图片。当选择到最后一张图片时，未防止返回null。所以需要将元素改为第一张图片（imgArray[0]）。此前已获取文档中所有图片并存储到imgArray数组中，所以这里可以直接利用数组索引将最后一张图片的next变为第一张图片。

同理，设置当用户点击prev时切换到上一张图片。

at() 方法接收一个整数值并返回该索引对应的元素，允许正数和负数。负整数从数组中的最后一个元素开始倒数。

imgArray.at(-1)：当用户点击至第一张图片任然继续点击上一张时，为防止返回null。所以需要改变其为图片数组中的最后一张图片传给next

利用小点切换图片的实现：

           // 获取当前显示的图片的索引

            const index = imgArray.indexOf(next)

            // 切换显示状态

            current.classList.remove("current") // 先移除当前current位置

            next.classList.add("current") // 将current添加到下一个元素中

            // 切换active

            const currentActive = document.querySelector(".active") // 当前拥有active的元素

            currentActive.classList.remove("active")

            // 获取到当前要显示的小点

            dots[index].classList.add("active")

获取用户需要切换到的显示图片的索引

indexOf() 方法返回数组中第一次出现给定元素的下标，如果不存在则返回 -1。

因为切换图片使用的是next记录图片位置，所以要获取用户当前需要切换图片的索引时，需使用indexOf()将图片数组的索引记录下来。才能实现点击小点切换到相应图片的功能。

current.classList.remove("current") // 先移除当前current位置

next.classList.add("current") // 将current添加到下一个元素中

remove() 方法从 DOMTokenList 中移除指定标记

首先需要移除当前current所在的图片位置，remove()括号内传递的是需要移除的标记

add() 方法将给定的标记添加到列表中

在利用add()方法，将current标记添加到用户点击的小点点图片所在位置

这两步只是实现了点击小点切换图片，但小点点并不会随着用户切换的图片位置而发生改变。会一直停留在第一个点上。要实现将小点点的位置同步图片位置还需要实现以下代码

           // 切换active

            const currentActive = document.querySelector(".active") // 当前拥有active的元素

            currentActive.classList.remove("active")

此前在第一个小点点上设置了active属性，所以在这里可以先找到文档中当前小点点的位置并存储在currentActive中。然后将active从当前显示的图片移除。

            // 获取到用户点击显示的小点点，并添加

            dots[index].classList.add("active")

接下来只需要将用户点击的小点点添加到切换的图片所在位置的索引即可实现将小点点与当前图片位置同步。

dots[index]:因为所有的小点点都是在数组dots中（此数组为全局常量），且之前已经将用户需要切换的图片的索引记录，在这里只需要利用数组索引将小点点添加到所在位置即可

绑定点击响应事件：

addEventListener() 方法将指定的监听器注册到 EventTarget 上，当该对象触发指定的事件时，指定的回调函数就会被执行。事件目标可以是一个文档上的元素 Element、Document 和 Window，也可以是任何支持事件的对象（比如 XMLHttpRequest）。

点击响应事件用来当用户点击小点点时切换图片。

Event 接口的 target 只读属性是对事件分派到的对象的引用。

 dots.indexOf(event.target)：处理用户点击小点点时的dots数组索引的委派事件，并存储到index中。并判断index的索引是否合规，合规则调用changeImg函数，并将小点点的索引传递过去。

自动切换图片的实现：

自动切换使用定时器实现，这里利用闭包。有两个问题;

1.当用户点击上一张或下一张图片时，如果刚好碰上定时器开启的话，则会立马切换图片，这样会造成用户想要的轮播图与实际轮播图不一致

2.当用户的鼠标移动至轮播图时，应该停止轮播

定时器的开启与关闭：

闭包（closure）是一个函数以及其捆绑的周边环境状态（lexical environment，词法环境）的引用的组合。换而言之，闭包让开发者可以从内部函数访问外部函数的作用域。在 JavaScript 中，闭包会随着函数的创建而被同时创建。

闭包：我的理解为函数内套函数，使内部函数可以访问外部函数的定义的作用域。当需要避免某些属性或者变量被他人访问时使用闭包。

为什么使用闭包？

因为需要利用到timer来判断当前是否需要开启定时器还是结束定时器，当timer设置为全局变量时可能会带来当其他开发者也设置timer变量时，会将自己的timer值改变。为避免出现此类问题，所以使用闭包，这样timer就可以只有内部函数才能访问。

setTimeout() 方法设置一个定时器，该定时器在定时器到期后执行一个函数或指定的一段代码。

设置一个定时器，执行auto() 函数。判断当前的timer是否为空，如果为空则开启定时器，否则关闭定时器。这样就解决了第一个问题。

当鼠标移动至轮播区时，停止轮播效果：

getElementsByClassName：返回一个包含了所有指定类名的子元素的类数组对象。当在 document 对象上调用时，会搜索整个 DOM 文档，包含根节点。

因为整个的轮播区是在div样式为outer的类名中，所以只需要获取到轮播区的区域，配合鼠标移动即可实现定时器的开与关

document.getElementsByClassName("outer")[0]

最后的0是为了详细查找文档中出现的第一个outer类名。

outer.onmouseenter：鼠标经过时

 outer.onmouseleave：鼠标离开时

以上内容来自哔哩哔哩“李立超老师”的JavaScript核心基础课程学习后的自我理解。若需要更全面的了解可前往学习。

因个人水平有限，可能会出现错误或者偏差。欢迎批评指正。