纯js实现轮播图插件

港控/mmm° 2022-11-28 16:30 456阅读 0赞

## 第一步 ##

首先，先建立一个普通的HTML里面有一个id是banner的div

<!DOCTYPE html>
    <html>
    <head>
    	<title>test</title>
    </head>
    <body>
    	<div id="banner"></div>
    </body>
    </html>

插件顾名思义就是插进去然后就能实现的件，故我们要做的这个插件要封装好，封装到一个函数的程度，其他操作都要在内部完成  
这里先管这个函数叫createBanners()  
然后我们考虑这个函数的参数，第一个肯定是轮播图的位置-dom，第二个就是轮播图的图片并且有点击图片后的链接，应该是一个数组\[\]  
所以我们定义这个函数

function createBanners(divarea,options){}

其中options是个数组，divarea是轮播图放的地方

## 第二步 ##

思路出来以后我们就要开始实现了  
先建立一个js并且在刚刚建好的HTML中引用他

然后调用这个函数

链接和图片数量随便写

## 第三步 ##

现在开始内部实现  
先定义能用到的变量

var imagArea = document.createElement("div"); //图片区域
    var numArea = document.createElement("div"); //角标区域
    var curIndex = 1;//第几张图
    var changeTimer = null;//计时器
    var changeDuration = 3000; //3秒切换
    var timer = null;//动画计时器

首先内部第一个功能是初始化图片先把图片排列好(横向/纵向都行就是动画的方向问题，这里是横向)

### 1.初始化图片函数 initImage(); ###

首先先把图片区域设置好,让imagArea区域把他的父级(也就是id=banner的div)给撑满

imagArea.style.width = "100%";
    imagArea.style.height = "100%";
    imagArea.style.display = "flex";
    imagArea.style.overflow = "hidden";

然后用循环把图片从数组里拿出来并设置好样式加入点击事件并加入到imagArea区域里

for (let i = 0; i < options.length; i++) {
    	var obj = options[i];
    	var imag = document.createElement("img");
    	imag.src = obj.url;
    	imag.style.height = "100%";
    	imag.style.width = "100%";
    	imag.style.marginLeft = "0";
    	imag.style.cursor = "pointer";
    	imag.addEventListener("click",function(){
    		location.href = obj.link;
    	})
    	imagArea.appendChild(imag);
    }

然后给图片加入两个事件 鼠标移入图片不动，鼠标移出图片开始动，就是一个计时器的启动和清除,最后将整个图片区域放入最终的div

imagArea.addEventListener("mouseenter", function(){
    	clearInterval(changeTimer);
    	changeTimer = null;
    });
    imagArea.addEventListener("mouseleave", function(){
    	autochange();
    });
    divarea.appendChild(imagArea);

### 2.初始化角标函数 initNumbers() ###

同理先设置好区域

numArea.style.textAlign = "center";
    numArea.style.marginTop = "-20px";

然后循环引入并设置好样式，加入点击事件(将curindex改成当前页)并加入到角标区域,最后将角标区域放入最终的div

for (let i = 0; i < options.length; i++) {
    	var sp = document.createElement("span");
    	sp.style.width = "12px";
    	sp.style.height = "12px";
    	sp.style.display = "inline-block";
    	sp.style.margin = "0 7px";
    	sp.style.borderRadius = "50%";
    	sp.style.backgroundColor = "lightgrey";
    	sp.style.cursor = "pointer";
    	sp.addEventListener("click", function(){
    		curIndex = i;
    		setstatus();
    	})
    	numArea.appendChild(sp);
    }
    divarea.appendChild(numArea);

### 3.设置区域状态函数(切换图片函数) setstatus(); ###

先给角标加上颜色区分当前页还是非当前页  
循环修改

for (var i = 0; i < numArea.children.length; i++) {
    	if (i === curIndex) {
    		//当前页
    		numArea.children[i].style.background = "#be926f";
    	}
    	else{
    		//没选择的页
    		numArea.children[i].style.background = "lightgrey";
    	}
    }

角标切换完了，再切换图片，图片的切换原理就是修改第一个图片的margin-left因为所有图片都是排列在第一张图片的右侧，所以第一个图片的左外边距没向左移动一个100%就是切换一张图片(纵向排列就是上外边距)根据移动的距离和动画的时间就能算出移动的速度再配合上计时器就能实现动画(这里有个小问题，在做到后面才发现，不知道你能不能看出来)上代码

### 4.自动切换函数 autochange(); ###

这就很简单了，一个计时器，调用setstatus()就行了，这里有一个小问题就是如果在他自动切换的时候，你点击了切换角标，动画就停不下来了，需要一个判断如果现在正好有一个动画就清除，然后启动

## 全部代码 ##

// 创建轮播图区域
    // @{divarea}轮播图放入的地方
    // @{【url，link】} url图片地址 link点击图片跳转的链接
    
    function createBanners(divarea,options){
    	var imagArea = document.createElement("div"); //图片区域
    	var numArea = document.createElement("div"); //角标区域
    	var curIndex = 1;//第几张图
    	var changeTimer = null;//计时器
    	var changeDuration = 3000; //3秒切换
    	var timer = null;//动画计时器
    	//1.生成区域显示图片
    	initImage();
    
    
    	//2.生成区域显示角标
    	initNumbers();
    
    
    	//3.设置区域状态 
    	setstatus();
    
    	//4.自动切换
    	autochange();
    
    
    
    
    	function initImage(){
    		imagArea.style.width = "100%";
    		imagArea.style.height = "100%";
    		imagArea.style.display = "flex";
    		imagArea.style.overflow = "hidden";
    		for (let i = 0; i < options.length; i++) {
    			var obj = options[i];
    			var imag = document.createElement("img");
    			imag.src = obj.url;
    			imag.style.height = "100%";
    			imag.style.width = "100%";
    			imag.style.marginLeft = "0";
    			imag.style.cursor = "pointer";
    			imag.addEventListener("click",function(){
    				location.href = obj.link;
    			})
    			imagArea.appendChild(imag);
    
    		}
    		imagArea.addEventListener("mouseenter", function(){
    			clearInterval(changeTimer);
    			changeTimer = null;
    		});
    		imagArea.addEventListener("mouseleave", function(){
    			autochange();
    		});
    		divarea.appendChild(imagArea);
    	}
    
    	function initNumbers(){
    		numArea.style.textAlign = "center";
    		numArea.style.marginTop = "-20px";
    		for (let i = 0; i < options.length; i++) {
    			var sp = document.createElement("span");
    			sp.style.width = "12px";
    			sp.style.height = "12px";
    			sp.style.display = "inline-block";
    			sp.style.margin = "0 7px";
    			sp.style.borderRadius = "50%";
    			sp.style.backgroundColor = "lightgrey";
    			sp.style.cursor = "pointer";
    			sp.addEventListener("click", function(){
    				curIndex = i;
    				setstatus();
    			})
    			numArea.appendChild(sp);
    
    		}
    		divarea.appendChild(numArea);
    	}
    
    
    	function setstatus(){
    		//设置圈的背景颜色
    		for (var i = 0; i < numArea.children.length; i++) {
    			if (i === curIndex) {
    				//当前页
    
    				numArea.children[i].style.background = "#be926f";
    			}
    			else{
    				//没选择的页
    				numArea.children[i].style.background = "lightgrey";
    			}
    		}
    		//设置图片
    		var start = parseInt(imagArea.children[0].style.marginLeft);
    		var end = curIndex * -100;
    		var dis = end - start;
    		var duration = 500;
    		var speed = dis / duration;
    		if(timer){
    			clearInterval(timer);
    		}
    		timer = setInterval(function(){
    			start += speed * 20;
    			imagArea.children[0].style.marginLeft = start + "%";
    			if(Math.abs(end - start) < 1){
    				imagArea.children[0].style.marginLeft = end + "%";
    				clearInterval(timer);
    			}
    		},20)
    		
    
    	}
    
    
    
    	//自动切换
    	function autochange(){
    		if (changeTimer) {
    			return;
    		}
    		changeTimer = setInterval(function(){
    			if (curIndex === options.length - 1) {
    				curIndex = 0;
    			}
    			else{
    				curIndex++;
    			}
    			setstatus();
    		},changeDuration)
    	}
    }

### 一个简单的轮播图插件就做好了，只要是id叫banner的div都可以插入轮播图了 ###

![5.png][]

如果你觉得对你有帮助的话，请动动小手点击打赏按钮，请博主喝瓶水/doge/doge

[5.png]: /images/20221124/39489b49a15849df841444228a4d1837.png