网页制作中怎么做出点击按钮更换图片的效果
发布网友
发布时间：2022-04-23 17:00
共2个回答
热心网友
时间：2023-10-07 00:58
更改图片有两个办法
第一个是将所有图片加载，但是只显示一张图片，其余的隐藏，每点击一次，将当前的隐藏，下一个显示。
<div><!-- 这个div用了放置所有的img图片 --><img class="img" src="1.jpg" />
<img class="img" src="2.jpg" style="display:none" />
<img class="img" src="3.jpg" style="display:none" />
…………
<div>
/*jq 代码 button click事件*/
if(!num){
num = 0;//初始化计数
}
$(".img").hide();
$(".img").eq(num).show();
num++;
第二个是添加一个img，每次点击时候，更改img的src，即图片路径。
<div><!-- 这个div放置img图片 --><img class="img" src="1.jpg" />
<div>
/*jq 代码 button click事件*/
if(!num){
num = 0;//初始化计数
}
$(".img").attr("src",num+".jpg");
num++;
热心网友
时间：2023-10-07 00:59
<style>
#zx img{ width:200px; height:200px;}</style>
<script type="text/javascript">
function changer(){var zxx=document.getElementById("zx");var m=document.getElementById("cc");m.style.display="none";var oimg=document.createElement("img");oimg.src="file:///E|/北京旅游2015 7.5-7.22/IMG_20150705_165620.jpg";zxx.appendChild(oimg);}</script>
</head><body><div style="width:300px; height:500px;" id="zx"><img src="IMG_20150705_145240.jpg" id="cc" /></div><input type="button" value="改变图片" onclick="changer();" /></body>
