javascript制作百叶窗

最新推荐文章于 2021-05-21 09:01:56 发布

小小小小小小小小小小码农

最新推荐文章于 2021-05-21 09:01:56 发布

阅读量606

点赞数

分类专栏： html小编程整理文章标签： javascript

本文链接：https://blog.csdn.net/sinat_38314794/article/details/72511363

版权

html小编程整理专栏收录该内容

2 篇文章 0 订阅

订阅专栏

<!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" οnmοusemοve="press()" οnmοuseοut="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" οnclick="show(0)">1</td>
				<td class="cs1" id="td1" οnclick="show(1)">2</td>
				<td class="cs1" id="td2" οnclick="show(2)">3</td>
				<td class="cs1" id="td3" οnclick="show(3)">4</td>
				<td class="cs1" id="td4" οnclick="show(4)">5</td>
				<td class="cs1" id="td5" οnclick="show(5)">6</td>
				<td class="cs1" id="td6" οnclick="show(6)">7</td>
				<td class="cs1" id="td7" οnclick="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>

小小小小小小小小小小码农

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
javascript制作百叶窗

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-col
复制链接

扫一扫

专栏目录