<!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制作百叶窗
猜你喜欢
转载自blog.csdn.net/sinat_38314794/article/details/72511363
今日推荐
周排行