首先，能决定图片出现的原因是因为指定了图片的路径，也就是<img>的src属性。因此我们要考虑的是如何改变src。
这个是先试着通过按钮点击，来改变src。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>切换图片</title>
<style>
div{
width:500px;
height: 350px;
margin: auto;
text-align: center;
}
</style>
<script>
var i=1;
function changeImg(){
i++;
/*我们可以先写一下第二个图片的src,然后再看怎样拼接出一个可变的src。如下，
* document.getElementById("pic").src="img/P2.jpg";
* 将2的位置换成"+i+"
* */
document.getElementById("pic").src="img/P"+i+".jpg";
/*根据所具备的图片个数,来看i增加的几,又开始第一个图片的循环*/
if(i==4){
i=1;
}
}
</script>
</head>
<body>
<div>
<input type="button" value="下一张" οnclick="changeImg()"/>
<img src="img/P1.jpg" width="100%" height="100%" id="pic"/>
</div>
</body>
</html>
扫一扫
245
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
