本文介绍了一个简单的HTML页面示例，通过按钮点击切换不同的图片。使用JavaScript实现图片切换功能，适用于初学者理解基本的DOM操作。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>自动切换图片-jq22.com</title>
<script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
<style>
</style>
</head>
<body>
<img src="http://www.jq22.com/img/cs/300x500-1.png" id="img" width="200px" height="400px"><br>
<input type="button" id="img10" value="1" onclick="img('1')">
<input type="button" id="img11" value="2" onclick="img('2')">
<input type="button" id="img12" value="3" onclick="img('3')">
<input type="button" id="img13" value="4" onclick="img('4')">
<input type="button" id="img14" value="5" onclick="img('5')">
<script>
function img(num) {
var img = document.getElementById("img");
switch (num) {
case '1':
img.src = "http://www.jq22.com/img/cs/300x500-1.png";
break;
case '2':
img.src = "http://www.jq22.com/img/cs/300x500-2.png";
break;
case '3':
img.src = "http://www.jq22.com/img/cs/300x500-3.png";
break;
case '4':
img.src = "http://www.jq22.com/img/cs/300x500-4.png";
break;
case '5':
img.src = "http://www.jq22.com/img/cs/300x500-5.png";
break;
}
}
</script>
</body>
</html>
点击那个按钮就会显示所对应的图片
num为传的参数，break来阻止下面的代码继续执行
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
