网页制作中怎么做出点击按钮更换图片的效果
展开全部
更改图片有两个办法
第一个是将所有图片加载，但是只显示一张图片，其余的隐藏，每点击一次，将当前的隐藏，下一个显示。
<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++;
更多追问追答
追问
看不懂
追答
第一个方法，就是把图片都设置为隐藏的，通过jq选择器选择你想显示的那个图片，单独设置为显示。以此保证每次只显示一张图片。
已赞过
已踩过<
你对这个回答的评价是？
展开全部
可以使用js特效来控制代码如下
<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>
<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>
更多追问追答
追问
这个怎么怎么用
追答
不好意思代码弄错了
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
