一张原始图片和上一张、下一张两个按钮，单击转换图片
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>图片浏览器</title>
<style>
#all{
width:600px;
height:400px;
margin: 50px auto;
}
#last{
width:60px;
height:60px;
float:left;
margin-top:-220px;
}
#pic{
float:left;
}
#next{
width:60px;
height:60px;
float:right;
margin-top:-220px;
}
</style>
<script>
window.οnlοad=function(){
var i = 0;
var pic = document.getElementById("pic");
var last=document.getElementById("last");
var next=document.getElementById("next");
last.onclick = function(){
if (i==0) {
pic.src="images/"+i+".jpg";
alert("已经是第一张啦！");
}
else if(i==4) {
i = --i;
pic.src = "images/"+ i +".jpg";
}
else{
i = --i;
pic.src = "images/"+ i +".jpg";
}
}
next.onclick = function(){
if (i==4) {
pic.src="images/"+i+".jpg";
alert("已经是最后一张啦！");
}
else
{
i = ++i;
pic.src = "images/"+ i +".jpg";
}
}
}
</script>
</head>
<body>
<div id="all">
<img id="pic" src="images/0.jpg" width="600px" height="400px" alt="图片占位符" />
<input type="button" value="上一张" id="last" name="上一张" />
<input type="button" value="下一张" id="next" name="下一张"/>
</div>
</body>
</html>
2194
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
