jquery 图片轮换 潇湘博客

--jquery 图片轮换 潇湘博客

用JQ写最简单的图片轮换功能

<!--http://blog.csdn.net/fkedwgwy---->
<!--潇湘博客---->
<!------>
<!------>
<!------>
<html>
 <head>
  <script src="http://www.cssrain.cn/demo/1/SildeTab/jquery-1.2.6.pack.js" type="text/javascript"></script>
  <script>
   $(document).ready(function(){
     $("td img").one("click",function(){
        var index = $(this).attr("id");
        $("#idCodeDiv").fadeOut(500,function(){
           $("#idCodeDiv").attr({src:index+".jpg"});
           $("#idCodeDiv").fadeIn(500);
         });
       });
    });
   </script>
   <style rel="stylesheet" type="text/css">
    #idDIV{10%;padding:8px;background-color:#FFD700;font-family:verdana,tahoma;font-size:1em ;}
    #idCodeDiv{100%;padding:4px;font-family:verdana,tahoma;margin:12px 0px 0px 0px;background-color:#EEEEEE;font-weight:bold;}
    </style>
 </head>
 <body>
  <div id="idDIV"><img id="idCodeDiv"></img></div>
   <div><table>
    <tr><td><img id="img1" src="img1.jpg"></img></td><td><img id="img2" src="img2.jpg"></img></td></tr>
    <tr><td><img id="img3" src="img3.jpg"></img></td><td><img id="img4" src="img4.jpg"></img></td></tr>
    </table></div>
 </body>
</html>

原文地址:https://www.cnblogs.com/fengju/p/6174010.html