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

最新推荐文章于 2022-02-22 19:21:09 发布

高手在民间_

最新推荐文章于 2022-02-22 19:21:09 发布

阅读量221

点赞数

分类专栏：大学回忆，不放弃的四年文章标签： javascript 轮播效果网页

本文链接：https://blog.csdn.net/qq_40276753/article/details/103795442

版权

大学回忆，不放弃的四年专栏收录该内容

27 篇文章 0 订阅

订阅专栏

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
评论
一万个小时计划之5——制作一个可以轮播广告的网页

lunbo.html<!DOCTYPE html><html lang="en"><head> <meta charset="gb2312"> <title>Document</title><link rel="stylesheet" type="text/css" href="picshow.cs...
复制链接

扫一扫