呼吸灯轮播图特效

cw11lq

于 2022-06-30 16:53:27 发布

阅读量97

点赞数

分类专栏： JavaScript 文章标签：前端 javascript css

本文链接：https://blog.youkuaiyun.com/shmilylqd/article/details/125543983

版权

JavaScript 专栏收录该内容

3 篇文章

订阅专栏

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<style>
		*{
			margin: 0;
			padding: 0;
		}
		.carousel{
			width: 650px;
			height: 406px;
			border: 1px solid #000;
			margin: 50px auto;
			position: relative;
			
		}
		.carousel ul{
			list-style: none;
			position: absolute;
			left: 0px;
	
		}
		.carousel ul a{
			style:none ;
		}
		.carousel ul li{
			position: absolute;
			top: 0;
			left: 0;
			opacity: 0;//图片透明度
			transition: opacity 1s ease 0s;
			
		}
		.carousel ul li:first-child{
			opacity: 1;
		}
		.carousel .leftbtn{
			position: absolute;
			left: 20px;
			top: 50%;
			margin-top: -25px;
			width: 50px;
			height: 50px;
			background-color:rgba(0, 0, 0, .5) ;
			border-radius: 50%;
		}
		.carousel .rightbtn{
			position: absolute;
			right: 20px;
			top: 50%;
			margin-top: -25px;
			width: 50px;
			height: 50px;
			background-color:rgba(0, 0, 0, .5) ;
			border-radius: 50%;
		}
	</style>
</head>
<body>
<div class="carousel"> 
	<ul id="list">
		<li><img src="./1.jpg"></li>
		<li><img src="./2.jpg"></li>
		<li><img src="./3.jpg"></li>
	</ul>
	<a href="javascript:" class="rightbtn" id="rightbtn"></a>
	<a href="javascript:" class="leftbtn" id="leftbtn"></a>
</div>
<script>
	//得到按钮和ul，ul整体运动
	var leftbtn=document.getElementById('leftbtn');
	var rightbtn=document.getElementById('rightbtn'); 
	var list=document.getElementById('list');
	var lis=document.getElementsByTagName('li');
	var idx =0;//当前是第几张图显示
	var lock=true;
	rightbtn.onclick=function () {
		if(!lock) return;
		lock = false;
		lis[idx].style.opacity=0; 
		idx++;
		if(idx>3) idx=0;
		lis[idx].style.opacity=1; 
		setTimeout(function() {
			lock=true;
		},1000);
		}
	
	leftbtn.onclick=function () {
		if(!lock) return;
		lock = false;
		lis[idx].style.opacity=0; 
		idx--;
		if(idx<0) idx=3;
		lis[idx].style.opacity=1; 
		setTimeout(function() {
			lock=true;
		},1000);
		

	}
</script>
</body>
</html>