现在一般的网页上都会有图片轮播的功能，下面是该功能实现的示例代码：
代码如下：
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
.pic_scroll{
width: 574px;
}
.pic_scroll ul{
list-style: none;
float: right;
padding-left: 5px;
}
.pic_scroll ul li{
border: 1px solid black;
width: 30px;
height: 25px;
margin-top: 10px;
text-align: center;
padding-top: 5px;
}
.scroll_number_over{
color: red;
}
.scroll_number_out{
color: black;
}
</style>
</head>
<body>
<div class="pic_scroll">
<img src="ad-01.jpg" id="scroll_img">
<ul>
<li id="scroll_number1" onmouseover="loopShow(1)" class="scroll_number_over">1</li>
<li id="scroll_number2" onmouseover="loopShow(2)">2</li>
<li id="scroll_number3" onmouseover="loopShow(3)">3</li>
<li id="scroll_number4" onmouseover="loopShow(4)">4</li>
</ul>
</div>
</body>
<script type="text/javascript">
var scroll_img=new Array();
for(var i=0;i<4;i++){
scroll_img[i]="ad-0"+(i+1)+".jpg";
}
var nowPic=2;
function loopShow(d1){
nowPic=d1;
document.getElementById("scroll_img").src=scroll_img[nowPic-1];
for(var i=1;i<5;i++){
if(nowPic==i){
document.getElementById("scroll_number"+i).className="scroll_number_over";
}else{
document.getElementById("scroll_number"+i).className="scroll_number_out";
}
}
if(nowPic>=4){
nowPic=1;
}else{
nowPic++;
}
}
setInterval("loopShow(nowPic)",2000);
</script>
</html>
6万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
