jQuery通过设置元素的属性实现图片随机切换


jQuery通过设置元素的属性实现图片随机切换:

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3.     <head>  
  4.         <title>设置元素的属性(二)</title>  
  5.         <script type="text/javascript" src="../Jscript/jquery-1.4.2.js">  
  6. </script>  
  7.         <script type="text/javascript" src="../Jscript/jquery-1.4.2-vsdoc.js">  
  8. </script>  
  9.         <style type="text/css">  
  10. body {  
  11.     font-size: 12px  
  12. }  
  13.   
  14. .clsSpn {  
  15.     float: left;  
  16.     padding-top: 10px;  
  17.     padding-left: 10px  
  18. }  
  19.   
  20. .clsImg {  
  21.     border: solid 1px #ccc;  
  22.     padding: 3px;  
  23.     float: left  
  24. }  
  25. </style>  
  26.         <script type="text/javascript">  
  27. $(function() {  
  28.     $("img").attr("src", function() {  
  29.         return "../Images/img0" + Math.floor(Math.random() * 2 + 1) + ".jpg"  
  30.     }); //设置src属性   通过随机生成数字。。。因此每次生成的Src都不同，从而实现页面上图片的随机切换。  
  31.     $("img").attr("title", "这是一幅风景画"); //设置title属性  
  32.     $("img").addClass("clsImg"); //增加样式  
  33. })  
  34. </script>  
  35.     </head>  
  36.     <body>  
  37.         <img alt="" src="../Images/img03.gif" style="float: left" />  
  38.     </body>  
  39. </html>  

相关内容