Jquery实现动态切换图片的方法

最新推荐文章于 2022-11-10 08:56:30 发布

javaPie

最新推荐文章于 2022-11-10 08:56:30 发布

阅读量1.1k

点赞数 1

分类专栏： jQuery

jQuery 专栏收录该内容

68 篇文章 3 订阅

订阅专栏

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&ltr=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&ltu=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实现动态切换图片的方法。分享给大家供大家参考。具体实现方法如下：

 
          <!DOCTYPE html PUBLIC  
          "-//W3C//DTD XHTML 1.0 Transitional//EN" 
         
          "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" 
          > 
         
          <html xmlns= 
          "http://www.w3.org/1999/xhtml" 
          > 
         
          <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程序设计有所帮助。

javaPie

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Jquery实现动态切换图片的方法

Jquery实现动态切换图片的方法作者：永远爱好写程序字体：[增加减小] 类型：转载这篇文章主要介绍了Jquery实现动态切换图片的方法,涉及jQuery页面元素操作及链式操作的相关技巧,需要的朋友可以参考下本文实例讲述了Jquery实现动态切换图片的方法。分享给大家供大家参考。具体实现方法如下：?
复制链接

扫一扫