码迷,mamicode.com
首页 > Web开发 > 详细

js---幻灯片

时间:2017-01-18 09:31:42      阅读:212      评论:0      收藏:0      [点我收藏+]

标签:更改   tar   utf-8   script   ++   demo1   reset   position   文件名   

幻灯片demo1:

<!DOCTYPE html>
<style>
	div{
		position:absolute
	}
</style>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body onload="start_timer()">
		<script>
			var n = 1; //全局变量,记录当前图片的序号
			var timer = null;//全局变量,计时器
			//将图片换成第no张
			function changeToN(no) 
			{
				//利用图片的文件名和序号一致
				//1 获得img
				var img = document.getElementsByTagName("img")[0];
				//2 修改src属性
				img.setAttribute("src","img/"+no+".jpg");
				//3 给对应的div加高亮塞
				resetdiv();//还原所有的颜色
				var div = document.getElementById("d"+no);
				div.style.backgroundColor = "cadetblue";
				
				//4  修改全局变量的当前图片序号
				n = no;
			}
			//每个计时器要执行的代码
			function doInTimer()
			{
				if(n<5)
					n++;
				else
					n = 1;
				changeToN(n);//调用函数,更改图片
			}
			//启动计时器
			function start_timer()
			{
				if (timer==null)
					timer = window.setInterval("doInTimer()",2000);					
			}			
			//停止计时器
			function stop_timer()
			{
				window.clearInterval(timer);
				timer = null;
			}			
			
			
			
	</script>
		<div style="left:200px; top:200px; width: 300px; height: 200px; background-color: gold;">
			<img src="img/1.jpg" width="100%" height="100%" 
			 onmouseover="stop_timer()" onmouseout="start_timer()" />
		</div>
		
	</body>
</html>

  

js---幻灯片

标签:更改   tar   utf-8   script   ++   demo1   reset   position   文件名   

原文地址:http://www.cnblogs.com/ipetergo/p/6295496.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!