html如何让几张图片在一个框内随时间变化而变化
发布网友
发布时间：2024-04-05 23:20
共1个回答
热心网友
时间：2024-06-16 04:15
例如：
<style type="text/css">
*{margin:0px;padding:0px;}
body {
margin: 0;
padding: 0;
font-size: 12px;
line-height:200%;
}
a{
color:#333;
text-decoration:none;
}
img{border:0px;}
.hot{
position:relative;
width:296px;
height:392px;
}
.num{
position:absolute;
right:6px;
bottom:4px;
}
.num li{
float:left;
height:21px;
width:24px;
margin-right:3px;
}
.num li a{
display:block;
font-weight:bold;
text-align:center;
}
.num_other{
color:#000;
background:url() no-repeat;
}
.num_now{
color:#FFF;
background:url() no-repeat;
}
</style>
</head>
<body>
<div class="hot">
<div id="cover">
<div id="cover1"><a href="#"><img src="/uploads/common/images/wall1.jpg" height=392 width=296 alt="钻石" /></a></div>
<div id="cover2" style="display:none;"><a href="#"><img src="/uploads/common/images/wall2.jpg" height=392 width=296 /></a></div>
<div id="cover3" style="display:none;"><a href="#"><img src="/uploads/common/images/wall3.jpg" height=392 width=296 /></a></div>
<div id="cover4" style="display:none;"><a href="#"><img src="/uploads/common/images/wall4.jpg" height=392 width=296 /></a></div>
</div>
<ul id="idNum" class="num">
<li><a href="#" id="num1" class="num_now" onmouseover="coverHover(1);">1</a></li>
<li><a href="#" id="num2" class="num_other" onmouseover="coverHover(2);">2</a></li>
<li><a href="#" id="num3" class="num_other" onmouseover="coverHover(3);">3</a></li>
<li><a href="#" id="num4" class="num_other" onmouseover="coverHover(4);">4</a></li>
</ul>
<input type="hidden" id="count" value="1">
</div>
<script type="text/javascript">
function g(o) {
return document.getElementById(o);
}
function coverChange() {
var order = parseInt(g("count").value);
if (order < 4) {
orderNext = order + 1;
} else {
orderNext = 1;
};
for (var i = 1; i <= 4; i++) {
g("cover" + i).style.display = "none";
g("cover" + orderNext).style.display = "block";
g("num" + i).className = "num_other";
g("num" + orderNext).className = "num_now";
}
g("count").value = orderNext;
}
var t = setInterval(coverChange, 6000);
function coverHover(e) {
//clearInterval(t);
for (var i = 1; i <= 4; i++) {
g("cover" + i).style.display = "none";
g("cover" + e).style.display = "block";
g("num" + i).className = "num_other";
g("num" + e).className = "num_now";
}
};
</script>
</body>
</html>
