JS封装轮播图(带左右箭头)

最新推荐文章于 2024-07-31 21:34:37 发布

月薪不过5000不改名

最新推荐文章于 2024-07-31 21:34:37 发布

阅读量930

点赞数 1

文章标签： javascript

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

版权

该博客介绍了如何使用JavaScript创建一个带有左右箭头的无缝轮播图。通过添加克隆的图片元素，实现了左右切换的无缝效果。文章详细展示了HTML结构、CSS样式以及JavaScript代码，包括图片区域、角标区域、箭头区域的初始化，以及状态设置和自动切换功能。

摘要由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部分

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;
	//复制第一张一张图片
	var cloneFirstImg = options[0];
	//插入到数组的最后
	options.push(cloneFirstImg);
	//复制最后一张图片
	// var cloneBeftorImg = options[options.length - 2];
	// options.unshift(cloneBeftorImg);
	initImgs();

	//2.创建一个区域，用于显示角标
	initNumbers();

	//3.创建一个区域，显示箭头
	initArrow();

	//4.设置状态
	setStatus();

	//5.自动切换轮播图
	autoChange();

	//下面是局部函数
	//初始化图片区域
	function initImgs() {
		imgArea.style.width = "100%";
		imgArea.style.height = "100%";
		imgArea.style.display = "flex";
		imgArea.style.overflow = "hidden";
		for (var 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.flexShrink = "0";
			img.style.marginLeft = "0";
			areaDom.addEventListener("mouseenter", function() {
				clearInterval(changeTimer);
				changeTimer = null;
			});
			areaDom.addEventListener("mouseleave", function() {
				autoChange();
			});
			imgArea.appendChild(img);
		}
		areaDom.appendChild(imgArea);
	}

	//初始化角标区域
	function initNumbers() {
		numberArea.style.textAlign = "center";
		numberArea.style.marginTop = "-25px";
		//这里的i是全局的,第一种方法把var改成let
		//第二种方法使用闭包
		for (let i = 0; i < options.length - 1; 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";
			sp.addEventListener("click", function() {
				curIndex = i;
				setStatus();
			})
			numberArea.appendChild(sp);
		}
		areaDom.appendChild(numberArea);
	}

	//初始化箭头区域
	function initArrow() {
		areaDom.style.position = "relative";
		var lbtn = document.createElement("button");
		var rbtn = document.createElement("button");
		lbtn.style.position = "absolute";
		lbtn.style.width = "20px";
		lbtn.style.height = "30px";
		lbtn.style.lineHeight = "30px";
		lbtn.style.color = "#fff";
		lbtn.style.cursor = "pointer";
		lbtn.style.border = "none";
		lbtn.style.background = "rgba(0,0,0,0.3)";
		lbtn.style.fontWeight = "bolder";
		lbtn.style.fontSize = "15px";
		lbtn.innerText = "<"
		lbtn.style.top = "50%";
		lbtn.style.marginTop = "-15px";
		lbtn.style.display = "none";
		//添加事件
		areaDom.addEventListener("mouseover", function() {
			lbtn.style.display = "block";
			rbtn.style.display = "block";
		})
		areaDom.addEventListener("mouseout", function() {
			lbtn.style.display = "none";
			rbtn.style.display = "none";
		})
		lbtn.addEventListener("click", function() {
			if(curIndex === 0){
				curIndex = 2;
			}else{
				curIndex--;
			}
			setStatus();
		});
		lbtn.style.left = "0";
		lbtn.style.borderRadius = "0px 15px 15px 0px";
		rbtn.style.position = "absolute";
		rbtn.style.width = "20px";
		rbtn.style.height = "30px";
		rbtn.style.lineHeight = "30px";
		rbtn.style.color = "#fff";
		rbtn.style.cursor = "pointer";
		rbtn.style.border = "none";
		rbtn.style.background = "rgba(0,0,0,0.3)";
		rbtn.style.fontWeight = "bolder";
		rbtn.style.fontSize = "15px";
		rbtn.innerText = ">"
		rbtn.style.top = "50%";
		rbtn.style.marginTop = "-15px";
		rbtn.style.display = "none";
		rbtn.addEventListener("click", function() {
			curIndex++;
			setStatus();
		})
		rbtn.style.right = "0";
		rbtn.style.borderRadius = "15px 0px 0px 15px";
		areaDom.appendChild(lbtn);
		areaDom.appendChild(rbtn);
	}

	//设置整个区域的状态
	//圆圈区域
	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);
		}
		if (curIndex === options.length - 1) {
			setTimeout(function() {
				curIndex = 0;
				setStatus();
				imgArea.children[0].style.marginLeft = curIndex * -100 + "%";
				clearInterval(timer);
			}, 500);
		}
		if(curIndex === -1){
			
		}
		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);
	}
}