源码：
<html>
<head>
<title>一个简单banner</title>
<style>
*{margin:0;padding:0;}
.banner{height:200px;width:200px;height:120px;background-size:cover;margin:100px 0 0 200px;}
li{float:left;}
.right{margin-top:-180px;margin-left:352px;height:120px;width:50px;cursor:pointer;}
.left{margin-top:-180px;margin-left:0px;height:120px;width:50px;cursor:pointer;}
img{width:400px;height:300px;}
</style>
</head>
<body>
<div class="banner">
<img src="images/01.jpg" id="pc"/>
<img type="button" src="images/right.jpg" class="right" οnclick="r_change()" />
<img src="images/left.jpg" class="left" οnclick="l_change()" />
</div>
<script type="text/javascript">
var index = 1;
window.οnlοad=function(){
var p = document.getElementById("pc");
p.src="images/01.jpg";
}
//左切换
function r_change(){
var p = document.getElementById("pc");
index++;
var x = index % 6;
if(x == 0){
index = 1;
}
else{
index = x;
}
p.src="images/0"+index+".jpg";
}
//右切换
function l_change(){
var p = document.getElementById("pc");
index--;
var x = index % 6;
if(x == 0){
index = 5;
}
else{
index = x;
}
p.src="images/0"+index+".jpg";
}
</script>
</body>
</html>
235
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
