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

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

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

如此反复,如何实现啊
...全文
247 21 打赏 收藏 举报
写回复
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）
相关推荐
图片切换 图片切换
图片切换，flash和js想结合的特效 修改方便，
html地址栏上加日期,通过JS设置带URL的图片按日期进行切换，可以按天或者是小时切换显示...
通过JS设置带URL的图片按日期进行切换，可以按天或者是小时切换显示说明：利用style="display:block;"和style=“display:none;”(用JS来控制样式显示和不显示)代码如下：div格式自己调,这里放想放的内容0div格式自己调,这里放想放的内容1div格式自己调,这里放想放的内容2div格式自己调,这里放想放的内容3现在的切换时间为2秒：现在的切换时间为2秒：fu...
简单的js图片切换,简单的js图片切换
简单的js图片切换简单的js图片切换简单的js图片切换简单的js图片切换简单的js图片切换简单的js图片切换简单的js图片切换简单的js图片切换简单的js图片切换简单的js图片切换简单的js图片切换简单的js图片切换
js 图片切换 js 图片切换js 图片切换
js 图片切换js 图片切换js 图片切换js 图片切换js 图片切换js 图片切换
JS CSS版 4张大图 广告切换 代码
JS CSS版 4张大图 广告切换 代码 JS+CSS版比较古老的4张大图广告切换代码，不过设计的挺漂亮哦，在图片切换的过程中没有什么过渡效果，而且只能固定显示四张图片，限制有点多，不过代码简洁，想研究原理的请下载查看。
发帖
JavaScript

8.7w+

社区成员

22.4w+

社区内容

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