首页 > 代码库 > js---幻灯片

js---幻灯片

2024-09-01 12:08:52   217人阅读

幻灯片demo1:

<!DOCTYPE html>
<style>
	div{
		position:absolute
	}
</style>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body onl oad="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="http://www.mamicode.com/img/1.jpg" width="100%" height="100%" 
			 onm ouseover="stop_timer()" onm ouseout="start_timer()" />
		</div>
		
	</body>
</html>

　　

js---幻灯片


联系
我们