JS切换图片(急得想吃饭)

freeheartsz 2010-01-24 04:42:19
请教大家一个问题:
我现在有两张图片,A.gif和b.gif

页面默认载入的图片是A.gif
现在想实现的效果是:
当我单击后A.gif 转换为 B.gif
再次单击后又重新变为A.gif

如此反复,如何实现啊
...全文
255 21 打赏 收藏 转发到动态 举报
写回复
用AI写文章
21 条回复
切换为时间正序
请发表友善的回复…
发表回复
freeheartsz 2010-01-24
  • 打赏
  • 举报
 回复
其它的帮忙解决的兄弟

实在对不住了

小的分有限

不好意思啊
freeheartsz 2010-01-24
  • 打赏
  • 举报
 回复
[Quote=引用 19 楼 inpool 的回复:]
比较方便的方法是改一下你的ASP代码：
C# code<body><table width="418" id="tbl1"><%
While ((Repeat1__numRows<>0) AND (NOT Recordset1.EOF))%><tr><td><img src="images/arrow_down.gif"/></td><td><%=(Recordset1.Fields.Item("id").Value)%></td></tr><%
Repeat1__index=Repeat1__index+1
Repeat1__numRows=Repeat1__numRows-1
Recordset1.MoveNext()
Wend%></table></body>
[/Quote]
兄弟
你太强了
佩服得要死
分不多
多谢了
可以吃饭了
Inpool 2010-01-24
  • 打赏
  • 举报
 回复
比较方便的方法是改一下你的ASP代码：
<body> 

  <table width="418" id="tbl1"> 

<% 

While ((Repeat1__numRows <> 0) AND (NOT Recordset1.EOF)) 

%> 

    <tr> 

      <td> <img src="images/arrow_down.gif" /> </td> 

      <td> <%=(Recordset1.Fields.Item("id").Value)%> </td> 

    </tr> 

  <% 

  Repeat1__index=Repeat1__index+1 

  Repeat1__numRows=Repeat1__numRows-1 

  Recordset1.MoveNext() 

Wend 

%> 

  </table> 

</body>
freeheartsz 2010-01-24
  • 打赏
  • 举报
 回复
[Quote=引用 17 楼 inpool 的回复:]
把你代码贴出来
[/Quote]

我有用DW做的网页
代码是:
<%@LANGUAGE="VBSCRIPT"%>
<!--#include file="Connections/conn2.asp" -->
<%
Dim Recordset1
Dim Recordset1_numRows

Set Recordset1 = Server.CreateObject("ADODB.Recordset")
Recordset1.ActiveConnection = MM_conn2_STRING
Recordset1.Source = "SELECT * FROM srm_record"
Recordset1.CursorType = 0
Recordset1.CursorLocation = 2
Recordset1.LockType = 1
Recordset1.Open()

Recordset1_numRows = 0
%>
<%
Dim Repeat1__numRows
Dim Repeat1__index

Repeat1__numRows = 10
Repeat1__index = 0
Recordset1_numRows = Recordset1_numRows + Repeat1__numRows
%>
<html>
<head>
<title>test</title>
</head>
<body>
<%
While ((Repeat1__numRows <> 0) AND (NOT Recordset1.EOF))
%>
<table width="418" id="tbl1">
<tr>
<td><img src="images/arrow_down.gif" /></td>
<td><%=(Recordset1.Fields.Item("id").Value)%></td>
</tr>
</table>
<%
Repeat1__index=Repeat1__index+1
Repeat1__numRows=Repeat1__numRows-1
Recordset1.MoveNext()
Wend
%>
</body>
<script type="text/javascript">
window.onload=function(){

var imgs=['images/arrow_up.gif','images/arrow_down.gif'];
var imgEls = document.getElementById("tbl1").getElementsByTagName("img");
for (var i=0;i<imgEls.length ; i++){
imgEls[i].index = 0;
imgEls[i].onclick = function(){

this.src = imgs[(this.index = this.index+1)%imgs.length];

}
}
}
</script>
</html>
<%
Recordset1.Close()
Set Recordset1 = Nothing
%>

现在的情况是:
表格第一行的图片完全可以实行您的功能
但是
除第一行以外的都不行
图片都不能切换

再次麻烦了,都不好意思了
Inpool 2010-01-24
  • 打赏
  • 举报
 回复
把你代码贴出来
freeheartsz 2010-01-24
  • 打赏
  • 举报
 回复
[Quote=引用 15 楼 inpool 的回复:]
上面括号打错位子，虽然效果一样，但是this.index在一直增大，不太好。
this.src = imgs[this.index = （this.index+1)%imgs.length];
[/Quote]
太麻烦了
可是我用了好像不行
也没有什么错误提示但图片就是变不了
能帮忙再看一下吗
Inpool 2010-01-24
  • 打赏
  • 举报
 回复
上面括号打错位子，虽然效果一样，但是this.index在一直增大，不太好。
this.src = imgs[this.index = （this.index+1)%imgs.length];
Inpool 2010-01-24
  • 打赏
  • 举报
 回复 


<html>

<head>

	<title>test</title>

</head>

<body>

	<table id="tbl1">

		<tr><td><img src="a.gif" /></td></tr>

		<tr><td><img src="a.gif" /></td></tr>

	</table>

</body>

<script type="text/javascript">

window.onload=function(){

	var imgs=['a.gif','b.gif'];

	var imgEls = document.getElementById("tbl1").getElementsByTagName("img");

	for (var i=0;i<imgEls.length ; i++){

		imgEls[i].index = 0;

		imgEls[i].onclick = function(){

			this.src = imgs[(this.index = this.index+1)%imgs.length];

		}

	}

}

</script>

</html>
freeheartsz 2010-01-24
  • 打赏
  • 举报
 回复
[Quote=引用 12 楼 inpool 的回复:]
改进一下，要三张或者更多的切换的话只要往imgs数组再加一个图片url就行。
HTML code<html><head><title>test</title></head><body><imgsrc="a.jpg" id="img1" style="width:400px;height:400px;"/><scripttype="text/javascript">
window.onload=function(){var imgs=['a.jpg','b.jpg','c.jpg'];var i=0;
document.getElementById("img1").onclick=function(){this.src= imgs[i= (i+1)%imgs.length];
}
}</script></body></html>
[/Quote]
太感激了
真的实现了

不好意思再麻烦一个难题
我的网页是一个循环的表格
如何在表格的每一行中的A.gif和b.gif 都能实现这样的效果
Inpool 2010-01-24
  • 打赏
  • 举报
 回复
改进一下，要三张或者更多的切换的话只要往imgs数组再加一个图片url就行。
<html>

<head>

	<title>test</title>

</head>

<body>

	<img src="a.jpg" id="img1" style="width:400px;height:400px;" />

<script type="text/javascript">

window.onload=function(){

	var imgs=['a.jpg','b.jpg','c.jpg'];

	var i=0;

	document.getElementById("img1").onclick=function(){

		this.src = imgs[i = (i+1)%imgs.length];

	}

}

</script>

</body>

</html>
Inpool 2010-01-24
  • 打赏
  • 举报
 回复 
<html>

<head>

	<title>test</title>

</head>

<body>

	<img src="a.gif" id="img1" />

<script type="text/javascript">

window.onload=function(){

	var imgs=['a.gif','b.gif'];

	var i=0;

	document.getElementById("img1").onclick=function(){

		this.src = imgs[i = (i+1)%2];

	}

}

</script>

</body>

</html>
freeheartsz 2010-01-24
  • 打赏
  • 举报
 回复
[Quote=引用 9 楼 itliyi 的回复:]
引用 7 楼 ymmc001 的回复:
那给你个最保险的：
HTML code <imgsrc="A.gif" alt="" onclick="this.src = this.src=='A.gif' ? 'B.gif' : 'A.gif'"/>
e
[/Quote]
不行啊
变不回来啊
itliyi 2010-01-24
  • 打赏
  • 举报
 回复
[Quote=引用 7 楼 ymmc001 的回复:]
那给你个最保险的：
HTML code<imgsrc="A.gif" alt="" onclick="this.src = this.src=='A.gif' ? 'B.gif' : 'A.gif'"/>
[/Quote]e
freeheartsz 2010-01-24
  • 打赏
  • 举报
 回复
[Quote=引用 7 楼 ymmc001 的回复:]
那给你个最保险的：
HTML code<imgsrc="A.gif" alt="" onclick="this.src = this.src=='A.gif' ? 'B.gif' : 'A.gif'"/>
[/Quote]
还是刚才这个问题
第一次能变
后来就变不回来啊
天啊
Alien 2010-01-24
  • 打赏
  • 举报
 回复
那给你个最保险的：


<img src="A.gif" alt="" onclick="this.src = this.src=='A.gif' ? 'B.gif' : 'A.gif'" />
freeheartsz 2010-01-24
  • 打赏
  • 举报
 回复
[Quote=引用 5 楼 freeheartsz 的回复:]
引用 2 楼 archko 的回复:
<script>
function fun(obj){
if(obj.src=="A.gif"){
obj.src="B.gif";
}else{
obj.src="A.gif";//路径写全了
}
}
</script>
<img onclick="fun(this)" src="A.gif" alt=""/>


[/Quote]
不行啊,兄弟,图片还是不变啊
我改成图片的绝对路径也不行
单击后能够由A变成B
但是再单击后不能由B变成A
freeheartsz 2010-01-24
  • 打赏
  • 举报
 回复
[Quote=引用 2 楼 archko 的回复:]
<script>
function fun(obj){
if(obj.src=="A.gif"){
obj.src="B.gif";
}else{
obj.src="A.gif";//路径写全了
}
}
</script>
<img onclick="fun(this)" src="A.gif" alt=""/>
[/Quote]

不行啊,兄弟,图片还是不变啊
我改成图片的绝对路径也不行
passself 2010-01-24
  • 打赏
  • 举报
 回复
不知道楼主会不会用jquery使用奇偶事件就可以了
freeheartsz 2010-01-24
  • 打赏
  • 举报
 回复
太感谢了
可是太复杂了吧,应该还可以更简单一点
完全看不懂
archko 2010-01-24
  • 打赏
  • 举报
 回复
<script>
function fun(obj){
if(obj.src=="A.gif"){
obj.src="B.gif";
}else{
obj.src="A.gif";//路径写全了
}
}
</script>
<img onclick="fun(this)" src="A.gif" alt=""/>
加载更多回复（1）
JavaScript+jQuery+项目实战系列视频教程
JavaScript jQuery 项目实战系列教程 能掌握JS和Jquery的基本技能，能完成基本的网页特效！
前端面试题js总结
【代码】前端面试题js总结。
疯狂的程序员 41-50
绝影想了想，还是摇了摇头，这反而让周总更加充满了疑惑。 日子一天一天过去，DAP的进展是越发困难，周总和绝影对这个CASE彼此都是心照不宣。直到有一天，周总极其神秘地把绝影叫进办公室，说：“明天，我们一起去...
Chrome Devtools 高级调试指南
断点与 js 代码修改 看下面这张图，我在一个名为 toggleTab 的方法下打了两个断点，当开始执行我们的点击切换 tab 行为后，代码会在执行的断点出停下来，并把相关的数据展示一部分，此时可以在已经执行过得代码处，...
有哪些网站用爬虫爬取能得到很有价值的数据？
回顾2016年，我用爬虫做了很多事情。 1、微信好友的爬虫，了解一下你的好友全国分布，男女比例，听起来似乎是一个不错的想法，...当然有用，你想了解一下你所在城市的各种主流语言（Java、PHP、JavaScript、Pytho...
JavaScript

87,910

社区成员

224,616

社区内容

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章