js通过opacity属性实现（按钮）（圆点）双控制及（自动）图片轮播

本文介绍如何使用JavaScript通过按钮和圆点控制实现图片轮播功能，同时支持自动轮播，为用户提供灵活的交互体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<style type="text/css">
		.container{
			width: 500px;
			height: 300px;
			margin:0 auto;
			position: relative;
		}
		img{
			display: block;
			width:500px;
			height: 300px;
			position: absolute;
			transition: 500ms ease-in-out;
			opacity: 0;
		}
		button{
			display: block;
			width: 50px;
			height: 100px;
			position: absolute;
			top:100px;
		}
		button:nth-of-type(2){
			right: 0;
		}
.show{
			opacity: 1;
					}
/* .dispear{
			display: none;
		} */
	.li-cotainer{
		width: 130px;
		position: absolute;
		bottom: 0;
		left:100px;
		font-size: 0;
	}
	.li-cotainer>li{
		display: inline-block;
		width: 10px;
		height: 10px;
		border: 1px solid #ffffff;
		border-radius: 50%;
		margin: 10px ;
	}
	.ls{
		background: #ffffff;
		border: 1px solid #FFFFFF;
		/* box-shadow: ; */
	}
	</style>
	<body>
		<div class="container">
			<img src="img/1.jpg" >
			<img src="img/2.jpg" >
			<img class="show" src="img/3.jpg" >
			<img src="img/4.JPG" >
			<button><</button>
			<button >></button>
			<div class="li-cotainer">
				<li class="ls"></li>
				<li></li>
				<li></li>
				<li></li>
			</div>
		</div>
		<script type="text/javascript">
			var btn=document.getElementsByClassName("container")[0].getElementsByTagName("button");
			var imgArr=document.getElementsByClassName("container")[0].getElementsByTagName("img");
			var liArr=document.getElementsByClassName("container")[0].getElementsByTagName("li");
			var i=0;		
// 事件执行
			btn[1].onclick=right;
			btn[0].onclick=left;
			for(var j=0;j<liArr.length;j++){
				liArr[j].index=j;
				liArr[j].onmouseover=lim;
				}
// 相关方法
			function right(){
						i=i+1;
					for(var j=0;j<imgArr.length;j++){
						imgArr[j].className="";
						liArr[j].className="";
						}
					if(i>=4){
						i=0;
					}
					imgArr[i].className="show";
					liArr[i].className="ls"
					
					}
			function left(){
							i=i-1;
						for(var j=0;j<imgArr.length;j++){
							imgArr[j].className="";
							liArr[j].className="";
							}
						if(i<0){
							i=3;
						}
						imgArr[i].className="show";	
						liArr[i].className="ls"
						}
			function lim(){
							for(var k=0;k<imgArr.length;k++){
							imgArr[k].className="";
							liArr[k].className="";
							}
							imgArr[this.index].className="show";
							liArr[this.index].className="ls";
										i=this.index;
								}
// 定时器设置及清除
				inter1=setInterval(right,4000);
				for(var t=0;t<imgArr.length;t++){
					document.getElementsByClassName("container")[0].onmouseover=function(){
						clearInterval(inter1);
					}
					document.getElementsByClassName("container")[0].onmouseout=function(){
					inter1=setInterval(right,4000);
				}
			}
		</script>
	</body>
</html>

图在上一篇博文里不上传了