html 轮播图

最新推荐文章于 2024-10-07 18:37:26 发布

侠客岛主

最新推荐文章于 2024-10-07 18:37:26 发布

阅读量654

点赞数

分类专栏： html

本文链接：https://blog.csdn.net/tomorrow_shoe/article/details/104085812

版权

html 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
	<title>hello</title>
	<style type="text/css">
		body{
			text-align: center;
			/*text-align 只能对行内元素起作用不能对块状元素起作用*/
		}
		#map{
			width: 500px;
			height: 600px;
			border: 1px solid orange;
			margin: auto;
			/*利用margin来使块状元素自动居中*/
		}
		button{
			width: 70px;
			height: 40px;
			font-size: 25px;
			color: orange;
			border: none;
		}
	</style>
</head>
<body>

	<div id="map"></div>

	<button id="pre">pre</button>
	<button id="next">next</button>
	<!-- <img src="1.jpg"> -->

</body>

<script type="text/javascript">
	
	window.onload = function(){

		//获得各组件元素
		var map = document.getElementById("map");
		var pre = document.getElementById("pre");
		var next = document.getElementById("next");
		map.style.backgroundImage="url('img/1.jpg')";
  		
  		//pre按钮触发事件
  		pre.οnclick=function(){
  			show("pre");
  		};

  		//next按钮触发事件
  		next.οnclick=function(){
  			show("next");
  		};

  		var t;

  		//自动播放函数
  		function tt(){ 
  			window.setInterval(function(){show("next");},1500);
  		}
  		tt();

  		//根据方向确定下一张应该播放的数字
		function getNext(dir){
			var now = map.style.backgroundImage.substring(9,10);
			var now = parseInt(now);
			var dir = dir;
			var next;

			if(dir=="pre" && now==1){
				next=4;
			}else if(dir=="pre"){
				next=now-1;
			}

			if(dir=="next" && now==4){
				next=1;
			}else  if(dir=="next"){
				next=now+1;
			}

			return next;

		}

		//根据下一张数字更改背景图片
		function show(dir){
			map.style.backgroundImage="url('img/"+getNext(dir)+".jpg')";
		}


	}
</script>
</html>