轮播图 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			#imgbox{
				background: url(img/1.jpg) no-repeat;
				background-size: 100% 100%;
				margin: 0 auto;
				width: 500px;
				height: 300px;
				position: relative;
			}
			#top{
				position: absolute;
				top: 0;
				background: rgba(0,0,0,0.5);
				text-align: center;
				width: 100%;
				color: white;
			}
			#btm{
				position: absolute;
				bottom: 0;
				background: rgba(0,0,0,0.5);
				text-align: center;
				width: 100%;
				color: white;
			}
			#prev,#next{
				position: absolute;
				top: 50%;
				margin-top: -20px;
				display: block;
				background: rgba(204,0,153,0.5);
				width: 40px;
				height: 40px;
				line-height: 40px;
				text-align: center;
				vertical-align: middle;
				cursor: pointer;
			}
			#prev{
				left: 20px;
			}
			#next{
				right: 20px;
			}
		</style>
		<script>
			var imgarr=['img/1.jpg','img/2.jpg','img/3.jpg','img/4.jpg'];
			var imgindex=0;
			var arrText=['文字1','文字2','文字3','文字4'];
			var tid;
			var chgimg=function(){
				document.getElementById("imgbox").style.backgroundImage="url("+imgarr[imgindex]+")";
				document.getElementById("top").innerHTML=(imgindex+1)+"/"+imgarr.length;
				document.getElementById("btm").innerHTML=arrText[imgindex];
				imgindex=(imgindex+1)%imgarr.length;
				tid=setTimeout("chgimg()",2000);
			};
			function prev(){
				clearTimeout(tid);
				imgindex-=2;
				if(imgindex<0) imgindex=imgarr.length-1;
				chgimg();
			}
			function next(){
				clearTimeout(tid);
				chgimg();
			}
			window.onload=function(){
				document.getElementById("prev").onclick=prev;
				document.getElementById("next").onclick=next;
				chgimg();
			};
		</script>
	</head>
	<body>
		<div id="imgbox">
			<div id="top">1/4</div>
			<div id="btm">文字1</div>
			<div id="prev"><</div>
			<div id="next">></div>
		</div>
	</body>
</html>

　　

posted @ 2021-04-07 07:52  卿家尘归尘  阅读(12)  评论(0)  编辑  收藏  举报