原生js轮播图插件

月薪不过5000不改名

已于 2022-04-01 22:42:34 修改

阅读量514

点赞数

文章标签： html css javascript

于 2022-04-01 22:40:24 首次发布

本文链接：https://blog.csdn.net/Infatuatedmonkey/article/details/123909911

版权

本文档展示了如何使用纯JavaScript实现一个通用的轮播图插件。通过HTML和JS代码，详细解释了轮播图的创建过程，包括图片区域和角标区域的初始化，状态设置，自动切换等功能。案例中，轮播图会根据鼠标悬停事件暂停和恢复自动切换，并支持点击跳转链接。

摘要由CSDN通过智能技术生成

js轮播图插件
1，html部分

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>原生JS实现通用轮播图插件</title>
	</head>
	<style type="text/css">
		#banner{
			width: 800px;
			height: 400px;
			/* border: 10px solid; */
			/* outline: 10px solid; */
			margin: 0 auto;
		}
	</style>
	<body>
		<div id="banner">
			
		</div>
		<script src="plugin/testBanner.js">
		</script>
		<script type="text/javascript">
		//第一个参数,插入幻灯片的位置
		var bannerDiv = document.getElementById("banner");
		//第二个参数,数组存放每一张幻灯片
			createBannerArea(bannerDiv,[
				{imgUrl:"./img/banner1.jpg",
				link:"#"},
				{imgUrl:"./img/banner2.jpg",
				link:"#"},
				{imgUrl:"./img/banner3.jpg",
				link:"#"}
			])
		</script>
		
	</body>
</html>

2，js部分

//areaDom 轮播图区域,是一个dom元素
//options轮播图配置
//全局函数附着在window对象中
function createBannerArea(areaDom,options){
	//图片区域的div
	var imgArea = document.createElement("div");
	//角标区域的div
	var numberArea=document.createElement("div");
	//当前显示的是第几张轮播图
	var curIndex = 0;
	//自动切换的计时器
	var changeTimer = null;
	//间隔时间
	var changeDuration = 3000;//三秒钟切换间隔
	//动画计时器
	var timer = null;
	
	
	//1.创建一个区域,用于显示图片
	initImgs();
	//2.创建一个区域用于显示角标
	initNumbers();
	
	//3.设置状态
	setStatus();
	
	//4.自动切换
	autoChange();
	
	
	//下面是局部函数
	//初始化图片区域
	function initImgs(){
		imgArea.style.width = "100%";
		imgArea.style.height = "100%";
		//弹性盒子
		imgArea.style.display = "flex";
		imgArea.style.overflow ="hidden";
		for(let i = 0; i < options.length ; i++){
			var obj = options[i];
			var img = document.createElement("img");
			img.src = obj.imgUrl;
			img.style.width = "100%";
			img.style.height = "100%";
			img.style.marginLeft = "0";
			img.style.flexShrink = "0";
			img.style.cursor = "pointer"
			img.addEventListener("click",function(){
				location.href = options[i].link;
			})
			imgArea.appendChild(img);
		}
		//鼠标移入时停止自动轮播
		areaDom.addEventListener("mouseenter",function(){
			clearInterval(changeTimer);
			changeTimer = null;
		});
		//鼠标移出时继续自动轮播
		areaDom.addEventListener("mouseleave",function(){
			autoChange();
		});
		areaDom.appendChild(imgArea);
	}
	//初始化角标区域
	function initNumbers(){
		numberArea.style.textAlign = "center";
		numberArea.style.marginTop = "-25px";
		//这里的i是全局的,第一种方法把var改成let
		//第二种方法使用闭包
		for(var i = 0;i<options.length;i++){
			var sp = document.createElement("span");
			sp.style.width = "12px";
			sp.style.height = "12px";
			sp.style.background = "lightgray";
			sp.style.display = "inline-block";
			sp.style.margin = "0 7px";
			sp.style.borderRadius = "50%";
			sp.style.cursor = "pointer";
			(function(index){
				sp.addEventListener("click",function(){
					curIndex = index;
					setStatus();
				})
			})(i)
			
			numberArea.appendChild(sp);
		}
		areaDom.appendChild(numberArea);
	}
	//设置整个区域的状态
	function setStatus(){
		//1.设置圆圈的背景颜色
		for(var i = 0;i<numberArea.children.length;i++){
			if(i === curIndex){
				//设置背景颜色为选中状态
				numberArea.children[i].style.background = "#be926f";
			}else{
				//设置背景颜色为普通状态
				numberArea.children[i].style.background = "lightgray";
			}
		}
	
		//2.显示图片
		//开始的距离
		var start = parseInt(imgArea.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;
			imgArea.children[0].style.marginLeft = start + "%";
			if(Math.abs(end-start)<1){
				imgArea.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)
	}


}