javascript制作百叶窗

来源:互联网 发布:kali linux dns设置 编辑:程序博客网 时间:2024/03/29 05:07
<!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>


原创粉丝点击