一万个小时计划之5——制作一个可以轮播广告的网页

lunbo.html


<!DOCTYPE html><html lang="en">
<head>
  <meta charset="gb2312">
  <title>Document</title>
<link rel="stylesheet" type="text/css"  href="picshow.css" > <!--href中写css样式表存放的路径-->
</link>
   
</head>
<body background="bg.jpg">









 <audio src="tothemoon.mp3" id="myaudio" autoplay="autoplay" controls="controls" loop="true" muted="muted">

    </audio>
	<div class="box">
		<ul class="banner">
			<li class="active"><a href="#"><img src="5.jpg" alt=""> </a></li>
			<li><a href="#"><imag src="7.jpg" alt=""></a></li>
			<li><a href="#"><imag src="3.jpg" alt=""></a></li>
			<li><a href="#"><imag src="4.jpg" alt=""></a></li>
			<li><a href="#"><imag src="5.jpg" alt=""></a></li>
		</ul>
		<ul class="btnbox">
			<li class="active"></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
		</ul>
		<div class="prev">&lt;</div>
		<div class="next">&gt;</div>
	</div>


<script>







	var imgs=document.querySelectorAll(".banner li");
	console.log(imgs);
	var btns=document.querySelectorAll(".btnbox li");
	var box=document.querySelector(".box");
	var nowbtn=btns[0];
	var nowimg=imgs[0];
	var st;

	Array.from(btns).forEach(function (btn,index)
	{
	      btn.onmouseover=function()
		{
			clearTimeout(st);
			st=setTimeout(function()
			{
			    num=index;
			    nowbtn.classList.remove("active");
			    this.classList.add("active");
			    nowbtn=this;
			    nowimg.classList.remove("active");
			    imgs[index].classList.add("active");
			    nowimg=imgs[index];
			}.bind(this),300);
			}

		});


	var num=0;
	var t=setInterval(move,3000);
	function move()
	{
		num++;
		if(num==imgs.length)
		{
			num=0;
		}
		if(num==-1)
		{
			num=imgs.length-1;
		}
		nowbtn.classList.remove("active");
		btns[num].classList.add("active");
		nowbtn=btns[num];
		nowimg.classList.remove("active");
		imgs[num].classList.add("active");
		nowimg=imgs[num];
	
	}

	box.onmouseover=function()
	{
		clearInterval(t);
	};
	box.onmouseout=function()
	{
		t=setInterval(move,3000)
	};
	
	var prev=document.querySelector(".prev");
	var next=document.querySelector(".next");
	
	var flag=true;
	next.onclick=function()
	{
		if(flag)
		{
			flag=false;
			move();
		}
	};
	prev.onclick=function()
	{
		if(flag)
		{
			flag=false;
			num-=2;
			move();
		}
	};
	
	Array.from(imgs).forEach(function(img)
	{
		img.addEventListener("transitionend",function()
		{
			flag=true;
		})
	});

   </script>
     

 
 
</body>
</html>


picshow.css

body, ul{
	margin:0;
	padding:0;
	list-style:none;
}
.myaudio{
	display:none


}
.box{
	width:800px;
	height:400px;
	margin:auto;
	position:relative;
}
.banner{
	width:800px;
	height:400px;  
	position:relative;
}
.banner li {

	width:800px;
	height:400px;
	position:absolute;
	left:0;
	top:0;
	opacity:0;
	z-index:1;
	transition:all 1s;
}
.banner li.active{
width:800px;
	height:400px;  
	position:relative;
background-image:url(3.jpg);
	opacity:1;
	z-index:2;

}
.banner a{
	display:block;
	width:800px;
	height:400px;
}
.banner img{
	width:800px;
	height:400px;
}
.btnbox{
	width:150px;
	height:20px;
	position:absolute;
	left=50%;
	margin-left:-75px;
	bottom:50px;
	z-index:999;
}
.btnbox li{
	width:20px;
	height:20px;
	background:#fff;
	border-radius:50%;
	float:left;
	margin:0 5px;
	cursor:pointer;
}
.btnbox li.active{
	background:red;
}
.prev, .next{
	width:50px;
	height:100px;
	background:rgba(0,0,0,0.5);
	color:#fff;
	font-size:20px;
	text-align:center;
	line-height:100px;
	cursor:pointer;
	position:absolute;
	top:50%;
	margin-top:-50px;
	z-index:999;
}
.prev{
	left:0;
}
.next{
	right:0;
}

 

 

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值