网页制作中怎么做出点击按钮更换图片的效果
最新回答
赏怀
2024-09-15 03:54:35
更改图片有两个办法
第一个是将所有图片加载，但是只显示一张图片，其余的隐藏，每点击一次，将当前的隐藏，下一个显示。
<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选择器选择你想显示的那个图片，单独设置为显示。以此保证每次只显示一张图片。
其实，只要学好了jq或者js，这个很快就可以弄好
陞香洇染
2024-09-15 15:59:48
<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>
追问
这个怎么怎么用
追答
不好意思代码弄错了
你等一下
1、根据你的图片情况来看，可以做成滑动门的形式
2、代码如下
#tabhang{ width:600px; height:40px;}
.tab1{ width:200px; color:#FFF; height:40px; float:left; background:#000; line-height:40px; text-align:center;}
.tab{ width:200px; height:40px; color:#000; float:left; background:#F7F7F7; line-height:40px; text-align:center;}
.con{ width:600px; height:200px; display:none}
.x{display:block; width:600px; height:200px;}
.y{display:none; }
#imhh{
width: 600px;
height: 200px;
}
#imhh img{width:600px; height:200px;}
function ty(index){
for( var i=1; i
新品种
进口食品
新西兰水果
</div
现在可以吗？
热门标签
