js 控制 点击按钮 将其背景图 换成另一张 再次点击恢复默认图片

 我来答
c100017
2011-06-07 · 超过22用户采纳过TA的回答
知道答主
回答量:124
采纳率:0%
帮助的人:0
展开全部
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>
<script>
var i=1;
var j=0;
var front;
var after;
var arr = new Array("p1.jpg","p2.jpg","p3.jpg","p4.jpg","p5.jpg","p6.jpg","p7.jpg","p8.jpg","p9.jpg","p10.jpg","p11.jpg","p12.jpg","p13.jpg","p14.jpg","p15.jpg","p16.jpg","p17.jpg","p18.jpg","p19.jpg","p20.jpg","p21.jpg","p22.jpg","p23.jpg");

//下一张
function down(){
if(j==0){
i++;
if(i>arr.length-1){
i=0;
}
}document.photos.src=arr[i];
}
//上一张
function up(){
if(j==0){
i--;
if(i<0){
i=arr.length-1;
}
}document.photos.src=arr[i];
}
//自动滚动
function automatism(){
window.clearInterval(after);
front = window.setInterval("down()",1000);
}
//反向自动切换
function reverse(){
window.clearInterval(front);
after=window.setInterval("up()",1000)
}
//暂停
function pause(){
window.clearInterval(front);
window.clearInterval(after);
}
</script>
<BODY>
<img src="p2.jpg"name="photos"></p>
<input type="button" value="上一张" onClick="up()">
<input type="button" value="自动滚动" onClick="automatism()">
<input type="button" value="反向滚动" onClick="reverse()">
<input type="button" value="暂停" onClick="pause()">
<input type="button" value="下一张" onClick="down()">
</BODY>
</HTML>

建个html文件,把这段代码放进去,跟图片放一起,试一下,希望对你有帮助
追问
是点击按钮 换按钮的背景图 不是 换img 。。。 还有我只要换两张图
百度网友d9c04c5b7
推荐于2016-01-01 · TA获得超过122个赞
知道答主
回答量:63
采纳率:0%
帮助的人:45.3万
展开全部
使用jquery的toggle方法进行图片切换
$(function(){
$("#h1").toggle(function(){
$("#h1").css("background-image","url('./20110528073501b54e6.jpg')");
},function(){
$("#h1").css("background-image","url('./2011060708410874041.jpg')");
})
})

<input type="button" value="huan" id="h1" class="hh1" />

CSS
.hh1{
background: url("./2011060708410874041.jpg");
width: 120px;
height: 90px;
}
本回答被提问者采纳
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
bboyliu723
2011-06-07
知道答主
回答量:36
采纳率:0%
帮助的人:0
展开全部
给你个思路吧,贵在自己思考和总结!以下为我的思路:

思路一:给一个全局变量:var flag 用来记录当前图片是否为默认图片的状态
默认状态下,flag=true表示为默认图片,当我们点击按钮时,修改flag=false;那么每次点击我们只用判断全局变量flag,flag==true,则换成其他图片,flag==false则修改图片为默认图片!

思路二:原理和思路一相同,但实现方式不同,给button按钮一个属性用来记录图片状态
<input type='button' id='test' flag='true' onclick=**/>每次点击此按钮则判断其flag属性即可
在此提示:
(最好使用 var t = document.getElementById('test');t.getAttritute('flag');以保证浏览器的兼容性获得flag属性;如果我没记错的话,在ie下不可使用t.flag得到flag属性,FF可以)
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
wangchunczh
2011-06-07 · 超过19用户采纳过TA的回答
知道答主
回答量:80
采纳率:0%
帮助的人:54.3万
展开全部
this.objMaxImgBoxObj = pyzy.$("divPyzyImgBoxContent"); //将大图片容器存储于变量
this.objMaxImgBoxObj.style.backgroundImage = "url(" + this.arrImgs[fctId][1] + ")//用当前大图片路径替掉大图片容器的背景

<div id="divPyzyImgBoxContent" style="background-image:url(images/logo120x500000.jpg);"></div>

css:
#divPyzyImgBoxContent{position:relative;margin:0px 60px;height:388px;background:url(images/b.gif) center center no-repeat;}

再通过按钮控制调用函数,顺便传送图片地址
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
收起 更多回答(2)
推荐律师服务: 若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询

为你推荐:

下载百度知道APP,抢鲜体验
使用百度知道APP,立即抢鲜体验。你的手机镜头里或许有别人想知道的答案。
扫描二维码下载
×

类别

我们会通过消息、邮箱等方式尽快将举报结果通知您。

说明

0/200

提交
取消

辅 助

模 式