通栏轮播图

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

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

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.transform = 'none';},500);n = 0;}}
})();

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

同理，如右按钮写左按钮代码。
学会妙用0s延时器，0s定时器会在其他语句完成后再执行，确保过渡属性在图片拉回至最后一张时再添加过渡并移动至第四张图片。
本文重难点：左按钮的事件监听

不会的同学，可以参考我的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；节流锁，当函数运行时，节流锁关闭，无法重复激活点击事件！从而达到函数节流的效果

惯例：不会的同学，可以参考我的代码演示：

 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——轮播图自动播放

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

/doge 手动狗头~~/doge

重难点：每次设置一个定时器时，一定要注意清除之前的定时器，防止资源大量占用！
一定要先定义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 晴

详解原生JS实现走马灯轮播图相关推荐

原生js进阶版轮播图实现(走马灯效果，无缝衔接)
原生js进阶版轮播图实现(走马灯效果,无缝衔接) 利用原生js手写一个轮播图,是上一篇文章的简易版的一个进阶,本次轮播图主要是利用定位和定时器实现了走马灯效果,并且是左右轮播.实现过程与代码也是很简单 ...
php cms 轮播图,原生JS运动实现轮播图
原生JS运动实现轮播图 **基本原理:**通过控制包含n张图片的ul的left值来实现图片自动运动的效果,其中列表中li元素的个数为n,第一个li和最后一个li里存放的图片应为同一张图片,当图片运动到 ...
html原生js实现图片轮播,原生js实现简单轮播图
本文实例为大家分享了js实现简单轮播图的具体代码,供大家参考,具体内容如下一.写入网页基本结构 body: 网页的最外部设置一个id为wrap的容器,取代body,这样方便我们做一些初始化 css: ...
单机按钮来图片轮播_原生js如何实现轮播图效果？
第一种: 这个是之前写的,比较草率,没有注释,如果这个看不懂就去看第二个,比较仔细,主要是了解他,后面都会有一些插件来使用,很方便,只要几行代码就可写出各种各样的代码,所以,不懂的话,不要太在意, 第 ...
原生js+css 实现轮播图完整代码
利用原生的js实现轮播图,可以添加到自己的UI库中,在以后的项目中对其进行修改然后添加到已有项目中. 先写出css部分和html部分,直接上代码 <!DOCTYPE html> <h ...
html动态轮播效果怎么做,详解JavaScript实现动态的轮播图效果
利用javascript能实现常见的动态的网页轮播图效果,如下图1所示: 图1 实现该轮播图有以下几个要点: (1)在左右两侧各有一个箭头,分别指的是向左和向右切换,即点击相应的位置就会切换到该图片之 ...
js判断定时器是否启动_原生js如何做出轮播图的效果
<div class="box"><ul><li class="active"><img src="./im ...
html图片3djs轮播,原生js实现3D轮播图
3D轮播图是我做过复杂的图片轮播了,由于是利用坐标,层级之间的关系,所以实现起来原理比较简单但是bug巨多,在推推拖拖了好久后,下定决心重新整理成博客,与大家分享! 首先分析一下3D图片轮播的功能需求 ...
原生JS实现小米轮播图和网易云轮播图
文章目录小米轮播图网易云轮播图小米轮播图实现功能: 定时切换(2s) 点击按钮停止切换点击向左向右按钮进行相应切换鼠标点击下方的小圆点,并进行相应的切换效果: 代码如下: <!DO ...
html图片重叠轮播,原生JS实现层叠轮播图
又是轮播?没错,换个样式玩轮播. HTML: wtf < > CSS: .box {width: 1200px; height: 300px; transform-style: perse ...

详解原生JS实现走马灯轮播图