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

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

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

如此反复,如何实现啊
...全文
245 21 打赏 收藏 举报
写回复
21 条回复
切换为时间正序
当前发帖距今超过3年,不再开放新的回复
发表回复
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

8.7w+

社区成员

Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
帖子事件
创建了帖子
2010-01-24 04:42
社区公告
暂无公告