js 控制 点击按钮 将其背景图 换成另一张 再次点击恢复默认图片
展开全部
<!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文件，把这段代码放进去，跟图片放一起，试一下，希望对你有帮助
<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 。。。 还有我只要换两张图
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
使用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;
}
$(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;
}
本回答被提问者采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
给你个思路吧，贵在自己思考和总结！以下为我的思路：
思路一：给一个全局变量：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可以）
思路一：给一个全局变量：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可以）
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
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;}
再通过按钮控制调用函数，顺便传送图片地址
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）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
