JavaScript最基本的轮播图

最新推荐文章于 2022-08-17 17:34:45 发布

偶尔正经的小明

最新推荐文章于 2022-08-17 17:34:45 发布

阅读量197

点赞数

本文链接：https://blog.csdn.net/zhangbiaoxiaoming/article/details/83153483

版权

直接上代码，css样式没有标注

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			.div1{
              	width: 600px;
              	height: 400px;
              	margin: auto;
				position: relative;
			}
			img {
				width: 600px;
				height: 400px;
				position: absolute;
				opacity: 0;	
			}
			#left_span{
				display: inline-block;
				width: 10px;
				height: 50px;
				background: red;
				position: absolute;
				top: 175px;
			}
			#right_span{
				display: inline-block;
				width: 10px;
				height: 50px;
				background: red;
				position: absolute;
				top: 175px;
				left: 590px;
			}
			#left_span:hover,#right_span:hover {
			     cursor: pointer;
			}
			.div1 div{
				width: 30px;
				height: 30px;
				color: white;
				position: absolute;
				bottom: 10px;
				text-align: center;
				line-height: 30px;
			}
			#div1_1{left: 200px;}
			#div1_2{left: 240px;}
			#div1_3{left: 280px;}
			#div1_4{left: 320px;}
			#div1_5{left: 360px;}
			.div1_i{
				background: blue;
			}
		    .div1 div:hover{
			  background: blue;
			  cursor: pointer;	
			}
			.img1{
				opacity: 1;
			}
		</style>
		<script type="text/javascript">
			var arr= new Array(5);
			var darr= new Array(5);
			//a表示正展示图片的索引
			 var a=0;
			onload=function(){
				var img=document.querySelectorAll('img');
				var div =document.querySelectorAll('.div1 div');
				for (var i=0;i<5;i++) {
					arr[i]=img[i];
                     img[i].index=i
                     darr[i]=div[i];
                     div[i].index=i;
				}
				//通过计时器 让图片自己切换
			  var time 
			  function mytime(){
			    	//通过清空当前img的类名，清空透明度
					arr[a].className ='';
					//通过清空当前div的类名，改变div背景
					darr[a].className='';
					//获得下一个图片索引
					a++;
					//判断上一个索引是否大于四 若大于四 变成第0个
					if (a>4) {
						a=0;
					}
					 //通过设置下一张图片类名，设置透明度为1.
					arr[a].className='img1';
					//通过设置下一个div类名，设置其背景.
					darr[a].className='div1_i';
			    }
			   //开启计时器
				time = setInterval(mytime,1000);
			   //鼠标移入时停止计时器
			    var div = document.querySelector('.div1');
			    div.onmouseover=function(){
			    	clearInterval(time);
			    }
			    //鼠标移出开始计时器
			    div.onmouseout=function(){
			    	time = setInterval(mytime,1000);
			    }
			    //鼠标移入下面div中，改变图片
			    for (arrDiv of darr){
			    	arrDiv.onmousemove=function(){
			    	  //先清空img div的类名
			    	  arr[a].className='';
			    	  darr[a].className='';
			    	  //移入的div设置背景及对应角标图片显示
			    	  arr[this.index].className='img1';
			    	  this.className='div1_i';
			    	  //改变a的值，a表示正展示图片的索引
			    	  a=this.index;
			    	}
			    }
			}
			//初始时 ，第一张图片透明度为1，其他透明度都为零。（你也可以改变其z-index来实现）
			function left_onclick(){
				//通过清空当前img的类名，清空透明度
				arr[a].className='';
				//通过清空当前div的类名，清除背景
				darr[a].className='';
                //获得上一个图片索引
                a--;
                //判断上一个索引是否小于零 若小于零 变成第四个
                if(a<0){
                	a=4;
                }
                //通过设置上一张图片类名，设置透明度为1.
                arr[a].className='img1';
                //通过设置上一个div类名，设置其背景.
                darr[a].className='div1_i';
			}
			
			function right_onclick(){
				//通过清空当前img的类名，清空透明度
				arr[a].className ='';
				//通过清空当前div的类名，改变div背景
				darr[a].className='';
				//获得下一个图片索引
				a++;
				//判断上一个索引是否大于四 若大于四 变成第0个
				if (a>4) {
					a=0;
				}
				 //通过设置下一张图片类名，设置透明度为1.
				arr[a].className='img1';
				//通过设置下一个div类名，设置其背景.
				darr[a].className='div1_i';
			}
		</script>
	</head>
	<body>
		<div class="div1">
			<img class="img1" src="img/p1.jpg" alt=""/>
			<img class="" src="img/p2.jpg" alt=""/>
			<img class="" src="img/p3.jpg" alt=""/>
			<img class="" src="img/p4.jpg" alt=""/>
			<img class="" src="img/p5.jpg" alt=""/>
			<span id="left_span" onclick="left_onclick();"></span>
			<span id="right_span" onclick="right_onclick();"></span>
			<div id="div1_1" class="div1_i">0</div>
			<div id="div1_2">1</div>
			<div id="div1_3">2</div>
			<div id="div1_4">3</div>
			<div id="div1_5">4</div>
		</div>
	</body>
</html>