简单的图片轮播器

最新推荐文章于 2021-05-30 22:24:02 发布

J.WADE

最新推荐文章于 2021-05-30 22:24:02 发布

阅读量331

点赞数

分类专栏： JS学习文章标签： js

本文链接：https://blog.csdn.net/qq_28147861/article/details/78311366

版权

JS学习专栏收录该内容

5 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#con
			{
				width: 400px;
				height: 400px;
				border: 10px solid #ccc;
				position: relative;
				margin: 0 auto 100px;
			}
			#con a{
				width: 40px;
				height: 40px;
				background: #000;
				position: absolute;
				background: #000;
				border: 5px solid white;
				top: 175px;
				text-align: center;
				text-decoration: none;
				line-height: 40px;
				color: #fff;
				font-size:30px;
				font-weight: bold;
				filter: alpha(opacity:40);
				opacity: 0.4;
			}
			#con a:hover{
				filter: alpha(opacity:90);
				opacity: 0.9;
			}
			#pre{right: 10px;}
			#nre{left: 10px;}
			#text,#span1{width:400px;height:40px;position: absolute;bottom: 0px; left: 0px; background: #000000;filter: alpha(opacity:40);
				opacity: 0.4;text-align: center; color: white;line-height: 40px;}
			#text{
					margin: 0;
				}
			#span1{
				top: 0;
			}
			#img1
			{
				width: 400px;
				height: 400px;
			}
			
		</style>
	</head>
	<body>
		<div id="con">
			<a id="nre" ><</a>
			<a id="pre" >></a>
			<p id="text">这是第一张图片</p>
			<span id="span1">1/4</span>
			<img id="img1" src="img/1.jpg" />
		</div>
		<script>
			var nre=document.getElementById("nre");
			var pre=document.getElementById("pre");
			var span=document.getElementById("span1");
			var text1=document.getElementById("text");
			var img1=document.getElementById("img1");
			var arrulr=['img/1.jpg','img/2.jpg','img/3.jpg','img/4.jpg'];
			var arrtext=['第一张','第二张','第三张','第四张'];
			var num=0;
			function qie()
			{
				img1.src=arrulr[num];
				text1.innerHTML=arrtext[num];
				span.innerHTML=num+1+'/'+arrulr.length;
			}
			
			setInterval(function()
			{
				num++;
				if(num==4)
				{
					num=0;
				}
				qie();
			},1800);
			pre.οnclick=function()
			{
				num++;
				if(num==4)
				{
					num=0;
				}
				qie();
			}
			nre.οnclick=function()
			{
				num--;
				if(num==-1)
				{
					num=3;
				}
					qie();
			}
		
			
			
		</script>
	</body>
</html>