12006 Js动画实例,轮播图源代码 – 恵玩科技

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-cn">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
	<title>网页标题</title>
	<meta name="keywords" content="关键字列表" />
	<meta name="description" content="网页描述" />
	<link rel="stylesheet" type="text/css" href="" />
	<style type="text/css">
		#jiaodiantu{
			width:540px;
			height:180px;
		}
		#jiaodiantu img{
			float:left;
		}
		#jiaodiantu p{
			margin:0px;
			float:right;
			width:30px;
		}
		#jiaodiantu p input{
			border:solid 1px gray;
			width:20px;
			height:20px;
			margin-bottom:5px;
			cursor:pointer;
		}
	</style>
	<script type="text/javascript">
		window.onload = init;
		var t1;
		function init()
		{
			t1 = window.setInterval("bian()", 1000);

			document.getElementsByTagName("input")[0].style.backgroundColor = "#ffcc99";
		}

		var n = 1;	//这里其实是用于指定显示的图的“序号”
		//var arr = ['abc.gif', '123.jpg', 'abc123.png',.....]
		function bian(){

			//换图
			var img1 = document.getElementById("img1");
			n++;
			if(n >= 7 )
			{
				n = 1;
			}
			img1.src= "images/dd_scroll_" + n + ".jpg";
			setBackGround();
		}
		function ting(){
			window.clearInterval( t1 );
		}
		function zou()
		{
			t1 = window.setInterval("bian()", 1000);
		}
		function huan( num )
		{
			//将图片换为 num 所对应的图
			ting();
			var img1 = document.getElementById("img1");
			img1.src= "images/dd_scroll_" + num + ".jpg";
			n = num;
			setBackGround();
		}
		function setBackGround(){
			var allButton = document.getElementsByTagName("input");
			var len = allButton.length;
			for(var i = 0; i<len; i++)
			{
				allButton[i].style.backgroundColor = "";	//清掉了所有背景
			}
			allButton[n-1].style.backgroundColor = "#ffcc99";//然后设置上当前背景
		}
	</script>
</head>
<body>
	<div id="jiaodiantu">
		<img src="images/dd_scroll_1.jpg" id="img1" onmouseover="ting();" onmouseout="zou();"/>
		<p>
			<input type="button" value="1" onmouseover="huan(1)"  onmouseout="zou();"/>
			<input type="button" value="2" onmouseover="huan(2)"  onmouseout="zou();"/>
			<input type="button" value="3" onmouseover="huan(3)"  onmouseout="zou();"/>
			<input type="button" value="4" onmouseover="huan(4)"  onmouseout="zou();"/>
			<input type="button" value="5" onmouseover="huan(5)"  onmouseout="zou();"/>
			<input type="button" value="6" onmouseover="huan(6)"  onmouseout="zou();"/>
		</p>
	</div>
	
	
</body>
</html>

 

打赏作者