js实现简单轮播图效果_js实现最简单轮播图效果-CSDN博客

本文链接：https://blog.csdn.net/GUfeifei___/article/details/120408268

1.实现效果

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>简易轮播图</title>
		<style type="text/css">
			*{
				margin: 0px;
				padding: 0px;
			}
			#one{
				width: 600px;
				height: 540px;
				border: 1px solid red;
				margin: 0 auto;
				position: relative;
			}
			#one>img{
				width:600px;
				height:540px;
				position: absolute;
				opacity: 0;
				transition: all  0.3s linear;
			}
			#one>.active{
				opacity: 1;
			}
			#dian{
				width: 500px;
				height: 50px;
				position: absolute;
				left: 10%;
				bottom: 40px;
			}
			.dian{
				width: 50px;
				height: 50px;
				border: 1px solid bisque;
				float: left;
				margin-left: 20px;
				border-radius: 50%;
			}
			#dian>.dactive{
				background: deepskyblue;
			}
		</style>
	</head>
	<body>
		<div id="one">
			<img src="../19放大镜/04.放大镜操作/104764b93ce519ea580ea2114cd0fe8b.jpg"/>
			<img src="../上下换图/img/w.jpg"/>
			<img src="../上下换图/img/wi.jpg"/>
			<img src="../放大镜重要/322059.jpg"/>
			<img src="../19放大镜/5.jpg"/>
			<div id="dian">、
				<div class="dian dactive"></div>
				<div class="dian"></div>
				<div class="dian"></div>
				<div class="dian"></div>
				<div class="dian"></div>
			</div>
		</div>
	</body>
	<script type="text/javascript">
		//定位元素
		var imgs=Array.from(document.getElementsByTagName('img'));
		var dians=Array.from(document.getElementsByClassName('dian'));
		//定义一个出始值的下标
		
		var index=0;//全局变量
		//设置定时器用于，每隔一秒中去更换图片与点
		//设置一个函数，用设值定时器的开始
		function go(){
			
			mytime=setInterval(function(){
				//让现在显示的图片与点去隐藏
				imgs[index].removeAttribute('class');
			dians[index].setAttribute('class','dian');
			//让index自增
			index++;
			 
			//加入判断
			if(index>imgs.length-1){
				index=0;
			}
			dians[index].setAttribute('class','dian dactive');
			imgs[index].setAttribute('class','active');
		},1000)
			}
			go();
			
			one.onmouseover=function(){
				clearInterval(mytime);
				
			}
			one.onmouseout=function(){
				go();
			}
		
		dians.forEach(function(v,k){
			v.onclick=function(){
				dians.forEach(function(val,key){
					val.setAttribute('class','dian');
					imgs[key].removeAttribute('class')
				})
				index=k;
				this.setAttribute('class','dian dactive');
				imgs[k].setAttribute('class','active')
			}
		})
	</script>
</html>