javascript制作百叶窗

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
			div{
				border: 1px black solid;
				width: 400px;
				height: 400px;
				overflow: hidden;
			}
			img{
				width: 400px;
				height: 400px;
				position: relative;
			}
			td{
				width: 30px;
				text-align: center;
				background-color: antiquewhite;
				
			}
			tr{
				position: absolute;
				top: 360px;
				left: 60px;
			}
			.cs2{
				background-color: antiquewhite;
				opacity: 0.5;
			}
			.cs1{
				border: 1px yellow solid;
			}
		</style>
		
	</head>
	<body>
		<div id="img" onmousemove="press()" onmouseout="continues()">
			<img src="img/0f0dcaacd5ddc288.jpg" />
			<img src="img/205f6fb8ba70846a.jpg" />
			<img src="img/2234ddd994a210d8.jpg" />
			<img src="img/3adbafb7c9e61e1a.jpg" />
			<img src="img/884f44ae49cac8ea.jpg" />
			<img src="img/b8f7b9a461029a95.jpg" />
			<img src="img/cedf07521a58a923.jpg" />
			<img src="img/f2f2d6fd1ff7c772.jpg" />
		</div>
		<table  cellpadding="0px" cellspacing="10px" >
			<tr>
				<td class="cs2" id="td0" onclick="show(0)">1</td>
				<td class="cs1" id="td1" onclick="show(1)">2</td>
				<td class="cs1" id="td2" onclick="show(2)">3</td>
				<td class="cs1" id="td3" onclick="show(3)">4</td>
				<td class="cs1" id="td4" onclick="show(4)">5</td>
				<td class="cs1" id="td5" onclick="show(5)">6</td>
				<td class="cs1" id="td6" onclick="show(6)">7</td>
				<td class="cs1" id="td7" onclick="show(7)">8</td>
			</tr>
		</table>
	</body>
	<script>
			var index = 0;
			/*滚动一张图片*/
			function show(type){
				index = type;
				/*获取div对象，一次切换一张图片*/
				var onePicter = document.getElementById("img");
				//alert(onePicter)
				/*由于图片大小不一的原因*/
				onePicter.scrollTop = 406 * index ;
				/*同步数字控件的样式*/
				for(var i = 0; i <= 7; i++){
					eval("td"+i).className ="cs1";
				}
				eval("td"+index).className="cs2";
			
			}
			
			/*自动滚动	*/
			function autoMove(){
				index++;
				if(index > 7)
					index = 0;
				show(index);
			}
			
			/*定时自动滚动*/
			var set = window.setInterval(autoMove,1000);
			/*暂停*/
			function press(){
				window.clearInterval(set);
			}
			/*继续*/
			function continues(){
				set = window.setInterval(autoMove,1000);
			}
		</script>
</html>
javascript制作百叶窗

猜你喜欢
