Jquery实现动态切换图片的方法
这篇文章主要介绍了Jquery实现动态切换图片的方法,涉及jQuery页面元素操作及链式操作的相关技巧,需要的朋友可以参考下
id="cproIframe_u1892994_2" width="580" height="90" src="http://pos.baidu.com/acom?adn=3&at=231&aurl=&cad=1&ccd=24&cec=GBK&cfv=17&ch=0&col=zh-CN&conBW=0&conOP=1&cpa=1&dai=2&dis=0<r=https%3A%2F%2Fwww.baidu.com%2Flink%3Furl%3DEV47q9WSOpvqVUbYk88Vf9s0rLUOPlAXiiL-2RxQ24frKOuicc8XLghVo-bAkTcZ%26wd%3Djquery%25E5%258A%25A8%25E6%2580%2581%25E5%258F%2598%25E6%258D%25A2%25E5%259B%25BE%25E7%2589%2587%26issp%3D1%26f%3D8%26ie%3Dutf-8%26tn%3Dbaiduhome_pg%26inputT%3D4786<u=http%3A%2F%2Fwww.jb51.net%2Farticle%2F66282.htm&lu_161=0&lunum=6&n=jb51_cpr&pcs=1252x692&pis=10000x10000&ps=514x161&psr=1440x900&pss=1252x515&qn=a276bd44405d7d81&rad=&rsi0=580&rsi1=90&rsi5=4&rss0=%23FFFFFF&rss1=%23F7FCFF&rss2=%230000ff&rss3=%23444444&rss4=%23008000&rss5=&rss6=%23e10900&rss7=&scale=&skin=tabcloud_skin_3&stid=5&td_id=1892994&titFF=%E5%AE%8B%E4%BD%93&titFS=12&titTA=left&tn=text_default_580_90&tpr=1432023101320&ts=1&version=2.0&xuanting=0&dtm=BAIDU_DUP2_SETJSONADSLOT&dc=2&di=u1892994&ti=Jquery%E5%AE%9E%E7%8E%B0%E5%8A%A8%E6%80%81%E5%88%87%E6%8D%A2%E5%9B%BE%E7%89%87%E7%9A%84%E6%96%B9%E6%B3%95_jquery_%E8%84%9A%E6%9C%AC%E4%B9%8B%E5%AE%B6&tt=1432023101298.347.506.506" align="center,center" marginwidth="0" marginheight="0" scrolling="no" frameborder="0" allowtransparency="true">
本文实例讲述了Jquery实现动态切换图片的方法。分享给大家供大家参考。具体实现方法如下:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
|
<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Transitional//EN"
<head>
<meta http-equiv=
"Content-Type"
content=
"text/html; charset=utf-8"
/>
<title></title>
<style type=
"text/css"
>
#tbl{border-collapse:collapse;border-top:1px solid red;border-left:1px solid red;margin:auto;}
#tbl td{border-collapse:collapse;border-bottom:1px solid red;border-right:1px solid red;}
#main{margin:0px auto;border:1px solid yellow;}
</style>
<script src=
"jquery-1.6.2.min.js"
type=
"text/javascript"
></script>
<script type=
"text/javascript"
>
var
$imgs;
var
$tds;
$(
function
() {
$tds = $(
"#tbl td"
);
$tds.click(
function
() {
//说明:
//$("img", $(this))表示当前td下的img元素
//$("img", $(this).siblings("td")) 表示当前td的所有兄弟元素(并且要求是td)下的img元素
$(
"img"
, $(
this
)).attr(
"src"
,
"../images/select.JPG"
);
$(
"img"
, $(
this
).siblings(
"td"
)).attr(
"src"
,
"../images/noselect.JPG"
);
});
}
);
</script>
</head>
<body>
<div id=
"main"
>
<table id=
"tbl"
>
<tbody>
<tr>
<td><img src=
"../images/noselect.JPG"
/></td>
<td><img src=
"../images/noselect.JPG"
/></td>
<td><img src=
"../images/noselect.JPG"
/></td>
<td><img src=
"../images/noselect.JPG"
/></td>
<td><img src=
"../images/noselect.JPG"
/></td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
|
希望本文所述对大家的jQuery程序设计有所帮助。