script 圆点/按钮的单击事件

MEA酱大胜利

已于 2023-03-06 15:23:51 修改

阅读量177

点赞数 2

文章标签： css css3 html

于 2023-03-06 15:18:54 首次发布

本文链接：https://blog.csdn.net/weixin_51936762/article/details/129363382

版权

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Title</title>
	<style>
		img{
			/*display: none;*/
		}
		*{
			padding: 0;
			margin: 0;
		}
		.main{
			height: 100vh;
			width: 100vw;
			overflow: hidden;
			display: flex;
			align-items: center;
			justify-content: center;
		}
		.content{
			height: 700px;
			width: 400px;
			/*background-color: pink;*/
			overflow: hidden;
			position: relative;
		}
		.content .banner-list{
			height: 100%;
			width: 300%;
			display: flex;
			position: absolute;
			left: 0;
		}
		.content .banner-list .banner-item{
			height: 100%;
			width: 400px;
		}
		.content .banner-list .banner-item a{
			display: block;
		}
		.content .banner-list .banner-item a img{
			display: block;
			height: 100%;
			width: 100%;
		}
		.opt{
			height: 100%;
			width: 100%;
			position: absolute;
			left: 0;
			top: 0;
		}
		.opt .allow{
			height: 50px;
			width: 50px;
			position: absolute;
			top: 275px;
			font-size: 26px;
			color: white;
			display: none;
			align-items: center;
			justify-content: center;
			background-color: rgba(0,0,0,0.3);
			cursor: pointer;
		}
		.opt .left{
			left: 0;
		}
		.opt .right{
			right: 0;
		}
		.opt .dots{
			height: 20px;
			width: 150px;
			background-color: rgba(0,0,0,0.4);
			position: absolute;
			bottom: 200px;
			left: 130px;
			border-radius: 10px;
			display: flex;
			align-items: center;
			justify-content: space-around;
			padding: 0 5px;
		}
		.opt .dots .dot {
			height: 16px;
			width: 16px;
			border-radius: 50%;
			background-color: gray;
		}
		.opt .dots .dot.active {
			height:15px;
			width: 15px;
			border:1px solid black;
			background-color: red;
		}
	</style>
</head>
<body>
	<div class="main">
		<div class="content">
			<div class="banner-list">
				<div class="banner-item">
					<a href="https://www.baidu.com" target="_blank">
						<img src="./images/0%7DRQEE1DZ)ZU6NQU8@14%7B8B.jpg" alt="">
					</a>
				</div>
				<div class="banner-item">
					<a href="https://www.zhihu.com" target="_blank">
						<img src="./images/%601Z%5B9(G_6YZJDK0Q(77L@F0.jpg" alt="">
					</a>
				</div>
				<div class="banner-item">
					<a href="https://www.mi.com" target="_blank">
						<img src="./images/X%7DQ9%7D%7D@9USXRWKHG%60Q7DLYX.jpg" alt="">
					</a>
				</div>
			</div>
			<div class="opt">
				<div class="allow left">&lt;</div>
				<div class="allow right">&gt;</div>
				<div class="dots">
					<div class="dot"></div>
					<div class="dot"></div>
					<div class="dot"></div>
				</div>
			</div>
		</div>
	</div>
</body>
<script>
	/*获取所有的圆点*/
	// const dots = document.getElementsByClassName("dot");
	/*获取轮播的长度*/
	const itemCount = document.getElementsByClassName("banner-item").length;
	/*获取轮播图的宽度  */
	const itemWidth = document.querySelector(".banner-item").clientWidth;
	/*设置初始展示轮播的下标*/
	let index=0;
	/*// 获取轮播内容区域*/
	const contentDiv = document.querySelector(".content")
	/*获取方向区域*/
	const allows = document.getElementsByClassName("allow")
	
	let interval = null;
	/*轮播内容绑定鼠标进入事件*/
	contentDiv.onmouseover=function () {
		/*设置方向显示*/
		for(let all of allows){
			all.style.display = "flex";
		}
		clearInterval(interval)
	}
	/*轮播内容绑定鼠标移出事件*/
	contentDiv.onmouseleave=function () {
		/*设置方向隐藏*/
		for(let all of allows){
			all.style.display = "none";
		}
		autoPlay();
	}
	
	/*上一张单击*/
	document.querySelector(".left").onclick=function (){
		if (index ===0){
			index=itemCount-1;
		}else{
			index--;
		}
		setBannerMovie();
	}
	
	/*下一张单击*/
	document.querySelector(".right").onclick=nextBanner;
	/*切换下一张*/
	function nextBanner() {
		if(index === itemCount-1){
			index = 0;
		}else{
			index++;
		}
		setBannerMovie();
	}
	
	function autoPlay() {
		interval=setInterval(nextBanner,3000);
	}
	/**
	 * 设置轮播图的移动
	 * @param type 移动类1向右2向左*/
	function setBannerMovie(type=1) {
		/*获取所有的指示点*/
		const dots = document.getElementsByClassName("dot");
		/*删除所有指示点的样式*/
		for(const d of dots){
			d.classList.remove("active");
		}
		/*设置指定的指示点添加样式*/
		dots[index].classList.add("active");
		/*计算偏移量*/
		let left = itemWidth*index*(-1);
		/*设置item-list的偏移量*/
		document.querySelector(".banner-list").style.left=left===0?left : left+"px";
		
		/* 遍历圆点数组*/
		for (let i =0;i<dots.length;i++){
			/*给圆点绑定单击事件*/
			dots[i].onclick = function(){
				for (let j=0;j<dots.length;j++){
					/*清空所有圆点的样式*/
					dots[j].className="dot";
				}
				/*给指定的按钮绑定样式*/
				dots[i].classList.add("active");
				/*计算偏移量*/
				let left = itemWidth*i*(-1);
				/*设置item-list的偏移量*/
				document.querySelector(".banner-list").style.left=left===0?left : left+"px";
				/* 圆点和图片的长度是一定相同的，所以圆点的下标可以直接拿来给图片使用*/
				index = i;
			}
		}
	}
	
	
	/*页面加载*/
	window.onload = function (){
		setBannerMovie();
		autoPlay()
	}
</script>
</html>