js点击按钮，更换某个img图片，且能循环更换多张图片？_百度知道
js点击按钮，更换某个img图片，且能循环更换多张图片？
我有更好的答案
&!doctype&html&&html&lang=&en&&&head& &meta&charset=&UTF-8&& &title&Document&/title& &script&
window.onload&=&function(){
//&这个数组里放置图片路径
var&imgs&=&['1.jpg','2.jpg','3.jpg'];
var&len&=&imgs.
var&current&=&0;
var&target&=&document.getElementById('target');
var&setImg&=&function(){
target.src&=&imgs[current];
current&=&++current&==&len&?&0:&
document.getElementById('btn').onclick&=&function(){
}; &/script&&/head&&body& &div&
&button&id&=&btn&&change&/button& &/div& &img&id&=&target&&src=&#&&alt=&&&&/body&&/html&
采纳率：81%
来自团队：
为您推荐：
其他类似问题
img的相关知识
换一换
回答问题，赢新手礼包
个人、企业类
违法有害信息,请在下方选择后提交
色情、暴力
我们会通过消息、邮箱等方式尽快将举报结果通知您。js 控制 点击按钮 将其背景图 换成另一张 再次点击恢复默认图片_百度知道
js 控制 点击按钮 将其背景图 换成另一张 再次点击恢复默认图片
我有更好的答案
使用jquery的toggle方法进行图片切换$(function(){
$(&#h1&).toggle(function(){
$(&#h1&).css(&background-image&,&url('./01b54e6.jpg')&);
},function(){
$(&#h1&).css(&background-image&,&url('./0874041.jpg')&);
}) &input type=&button& value=&huan& id=&h1& class=&hh1& /&CSS.hh1{
background: url(&./0874041.jpg&);
width: 120
height: 90 }
采纳率：34%
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:margin:0px 60height:388background:url(images/b.gif) center center no-}再通过按钮控制调用函数，顺便传送图片地址
给你个思路吧，贵在自己思考和总结！以下为我的思路：思路一：给一个全局变量：var flag 用来记录当前图片是否为默认图片的状态默认状态下，flag=true表示为默认图片，当我们点击按钮时，修改flag=那么每次点击我们只用判断全局变量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可以）
&!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 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(i&arr.length-1){
}document.photos.src=arr[i]; } //上一张 function up(){
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 。。。 还有我只要换两张图
其他1条回答
为您推荐：
其他类似问题
您可能关注的内容
背景图的相关知识
换一换
回答问题，赢新手礼包
个人、企业类
违法有害信息,请在下方选择后提交
色情、暴力
我们会通过消息、邮箱等方式尽快将举报结果通知您。js或jquery 获取指定div id下的所有img图片,并alert出第一张图片的src属性_百度知道
js或jquery 获取指定div id下的所有img图片,并alert出第一张图片的src属性
如,获取id为body的div下第一张图片的src值js有一个document.images[0].src 确实可以获取第一张图片,但是不能指定div下的第一张
我已经知道怎么获取的有多种方法 我这里就写一种吧,写出另外一种的我就给分啦(&#body img&).each(function(index, element) {
var width=$(element).width();
var height = $(element).height();
if(width&=200 && height&=200){
var src=$(element).attr('src');
我有更好的答案
document.getElementById(&body&).getElementsByTagName(&img&)[0].src
采纳率：71%
为您推荐：
其他类似问题
jquery的相关知识
换一换
回答问题，赢新手礼包
个人、企业类
违法有害信息,请在下方选择后提交
色情、暴力
我们会通过消息、邮箱等方式尽快将举报结果通知您。js动态切换图片的方法
转载 &更新时间：日 09:31:22 & 投稿：shichen2014
这篇文章主要介绍了js动态切换图片的方法,包含完整的css文件与js文件实现技巧,非常具有实用价值,需要的朋友可以参考下
本文实例讲述了js动态切换图片的方法。分享给大家供大家参考。具体实现方法如下：
index.css文件如下：
代码如下:* {&
&&& margin: 0padding: 0&
&&& width: 632&
&&& /*background-color:*/&
&&& margin: 0&
#imgsCom {&
&&& background-color:&
&&& /*相对定位，为了下层可以使用绝对定位时以本div的原点为原点*/&
&&& position:&
&&& list-style-type:&
&&& position:&
&&& /*使用以imgsCom为原点来绝对定位到右下角*/&
&&& bottom: 0&
&&& right: 0&
#ulnav li{&
&&& list-style-type:&
&&& float:&
&&& background-color:&
&&& color:&
&&& margin-right: 5&
&&& width: 20&
&&& height: 20&
&&& line-height: 20&
&&& text-align:&
&&& cursor:&
index.html如下：
代码如下:&!DOCTYPE html&&
&html xmlns="http://www.w3.org/1999/xhtml"&&
&&& &meta http-equiv="Content-Type" content="text/ charset=utf-8" /&&
&&& &title&js,css动态切换图片&/title&&
&&& &link href="css/index.css" rel="stylesheet" /&&
&&& &script type="text/javascript"&&
&&&&&&& function gel(id) {&
&&&&&&&&&&& return document.getElementById(id);&
&&&&&&& }&
&&&&&&& function& clearLiBg() {&
&&&&&&&&&&& var mylis = gel("ulnav").childN&
&&&&&&&&&&& for (var i = 0; i & mylis. i++) {&
&&&&&&&&&&&&&&& if (mylis[i].nodeType == 1) {&
&&&&&&&&&&&&&&&&&&& mylis[i].style.backgroundColor = "black";&
&&&&&&&&&&&&&&& }&
&&&&&&&&&&& }&
&&&&&&& }&
&&&&&&& window.onload = function() {&
&&&&&&&&&&& //给三个li都指定一个属性&
&&&&&&&&&&& var lis = gel("ulnav").childN&
&&&&&&&&&&& for (var i = 0; i & lis. i++) {&
&&&&&&&&&&&&&&& if (lis[i].nodeType == 1) {&
&&&&&&&&&&&&&&&&&&& lis[i].onclick = function () {&
&&&&&&&&&&&&&&&&&&&&&&& //更换图片&
&&&&&&&&&&&&&&&&&&&&&&& gel("myimg").setAttribute("src", "images/" + this.innerHTML + ".png");&
&&&&&&&&&&&&&&&&&&&&&&& //所有LI颜色复原&
&&&&&&&&&&&&&&&&&&&&&&& clearLiBg();&
&&&&&&&&&&&&&&&&&&&&&&& //更换LI背景标签颜色&
&&&&&&&&&&&&&&&&&&&&&&& this.style.backgroundColor = "silver";&
&&&&&&&&&&&&&&&&&&& };&
&&&&&&&&&&&&&&& }&
&&&&&&&&&&& }&
&&&&&&& };&
&&& &/script&&
&&& &div id="imgsCom" style="width: 632 height: 412"&&
&&&&&&& &img src="images/1.png" id="myimg" style="width: 632 height: 412 " /&&
&&&&&&& &ul id="ulnav"&&
&&&&&&&&&&& &li&1&/li&&
&&&&&&&&&&& &li&2&/li&&
&&&&&&&&&&& &li&3&/li&&
&&&&&&& &/ul&&
&&& &/div&&
希望本文所述对大家的javascript程序设计有所帮助。
您可能感兴趣的文章:
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具请问一个div里有两张图片，一张隐藏一张显示，我想点击一下使他们两个互换一下，这样写为什么不行
[问题点数：20分，结帖人suolwy]
本版专家分：0
结帖率 50%
CSDN今日推荐
本版专家分：121925
2017年 总版技术专家分年内排行榜第七
2018年5月 Web 开发大版内专家分月排行榜第一2018年1月 Web 开发大版内专家分月排行榜第一2017年12月 Web 开发大版内专家分月排行榜第一2017年6月 Web 开发大版内专家分月排行榜第一2017年2月 Web 开发大版内专家分月排行榜第一2016年3月 Web 开发大版内专家分月排行榜第一2015年8月 Web 开发大版内专家分月排行榜第一
2018年6月 Web 开发大版内专家分月排行榜第二2018年4月 Web 开发大版内专家分月排行榜第二2018年3月 Web 开发大版内专家分月排行榜第二2018年2月 Web 开发大版内专家分月排行榜第二2017年11月 Web 开发大版内专家分月排行榜第二2017年10月 Web 开发大版内专家分月排行榜第二2017年9月 Web 开发大版内专家分月排行榜第二2017年8月 Web 开发大版内专家分月排行榜第二2017年7月 Web 开发大版内专家分月排行榜第二2017年5月 Web 开发大版内专家分月排行榜第二2017年4月 Web 开发大版内专家分月排行榜第二2017年3月 Web 开发大版内专家分月排行榜第二2017年1月 Web 开发大版内专家分月排行榜第二2016年11月 Web 开发大版内专家分月排行榜第二2016年9月 Web 开发大版内专家分月排行榜第二2016年8月 Web 开发大版内专家分月排行榜第二2016年7月 Web 开发大版内专家分月排行榜第二2016年6月 Web 开发大版内专家分月排行榜第二2016年5月 Web 开发大版内专家分月排行榜第二2016年4月 Web 开发大版内专家分月排行榜第二2016年2月 Web 开发大版内专家分月排行榜第二2015年9月 Web 开发大版内专家分月排行榜第二2015年7月 Web 开发大版内专家分月排行榜第二2015年6月 Web 开发大版内专家分月排行榜第二2015年4月 Web 开发大版内专家分月排行榜第二2015年3月 Web 开发大版内专家分月排行榜第二2015年2月 Web 开发大版内专家分月排行榜第二
2016年12月 Web 开发大版内专家分月排行榜第三2016年10月 Web 开发大版内专家分月排行榜第三2016年1月 Web 开发大版内专家分月排行榜第三2015年12月 Web 开发大版内专家分月排行榜第三2015年11月 Web 开发大版内专家分月排行榜第三2015年10月 Web 开发大版内专家分月排行榜第三2015年5月 Web 开发大版内专家分月排行榜第三2015年1月 Web 开发大版内专家分月排行榜第三2014年12月 Web 开发大版内专家分月排行榜第三
本版专家分：2898
本版专家分：0
结帖率 50%
本版专家分：51173
2013年11月 Web 开发大版内专家分月排行榜第二
2013年10月 Web 开发大版内专家分月排行榜第三
本版专家分：4313
2018年1月 Web 开发大版内专家分月排行榜第三
本版专家分：0
结帖率 50%
本版专家分：121925
2017年 总版技术专家分年内排行榜第七
2018年5月 Web 开发大版内专家分月排行榜第一2018年1月 Web 开发大版内专家分月排行榜第一2017年12月 Web 开发大版内专家分月排行榜第一2017年6月 Web 开发大版内专家分月排行榜第一2017年2月 Web 开发大版内专家分月排行榜第一2016年3月 Web 开发大版内专家分月排行榜第一2015年8月 Web 开发大版内专家分月排行榜第一
2018年6月 Web 开发大版内专家分月排行榜第二2018年4月 Web 开发大版内专家分月排行榜第二2018年3月 Web 开发大版内专家分月排行榜第二2018年2月 Web 开发大版内专家分月排行榜第二2017年11月 Web 开发大版内专家分月排行榜第二2017年10月 Web 开发大版内专家分月排行榜第二2017年9月 Web 开发大版内专家分月排行榜第二2017年8月 Web 开发大版内专家分月排行榜第二2017年7月 Web 开发大版内专家分月排行榜第二2017年5月 Web 开发大版内专家分月排行榜第二2017年4月 Web 开发大版内专家分月排行榜第二2017年3月 Web 开发大版内专家分月排行榜第二2017年1月 Web 开发大版内专家分月排行榜第二2016年11月 Web 开发大版内专家分月排行榜第二2016年9月 Web 开发大版内专家分月排行榜第二2016年8月 Web 开发大版内专家分月排行榜第二2016年7月 Web 开发大版内专家分月排行榜第二2016年6月 Web 开发大版内专家分月排行榜第二2016年5月 Web 开发大版内专家分月排行榜第二2016年4月 Web 开发大版内专家分月排行榜第二2016年2月 Web 开发大版内专家分月排行榜第二2015年9月 Web 开发大版内专家分月排行榜第二2015年7月 Web 开发大版内专家分月排行榜第二2015年6月 Web 开发大版内专家分月排行榜第二2015年4月 Web 开发大版内专家分月排行榜第二2015年3月 Web 开发大版内专家分月排行榜第二2015年2月 Web 开发大版内专家分月排行榜第二
2016年12月 Web 开发大版内专家分月排行榜第三2016年10月 Web 开发大版内专家分月排行榜第三2016年1月 Web 开发大版内专家分月排行榜第三2015年12月 Web 开发大版内专家分月排行榜第三2015年11月 Web 开发大版内专家分月排行榜第三2015年10月 Web 开发大版内专家分月排行榜第三2015年5月 Web 开发大版内专家分月排行榜第三2015年1月 Web 开发大版内专家分月排行榜第三2014年12月 Web 开发大版内专家分月排行榜第三
本版专家分：0
结帖率 50%
匿名用户不能发表回复！|
CSDN今日推荐}