2nd
4

随机显示图片

Posted by 可乐 under 网页设计

因为右面的友情链接效果改成了显示8个图片，我就考虑，假如有100个友情链接了，那不是很长。所以考虑了在多个链接里随机抽取8个显示。
可惜可乐同志JS方面无比薄弱，所以请教了同事，基本上算是实现了功能。
PS：图片的命名规则为0.gif 1.gif 2.gif等等
数字0对应的是link0，数字1对应的是link1
假如看客您有更好的解决方案希望能留言或者E-mail我～谢谢

08-04-03修改
把代码重新组织了一下，加入了link的title显示效果，有问题记得留言给我哦

.kelelinks{ float: left; width: 50px; height:50px; border: 1px solid #CCC; margin: 5px 10px 10px 0;} .clear{ clear: both;}

  1. <script type="text/javascript"><!--
  2. var chars = ['0','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'];
  3. var weblink = [
  4. 'http://www.chaoketu.com/u/snake/',/*0*/
  5. 'http://jiemomavis.blogbus.com',/*1*/
  6. 'http://blog.sina.com.cn/phoenix99',/*2*/
  7. 'http://az2525775.spaces.live.com',/*3*/
  8. 'http://26438411.qzone.qq.com',/*4*/
  9. 'http://www.v2xe.cn/',/*5*/
  10. 'http://blog.sina.com.cn/u/1232697295',/*6*/
  11. 'http://blog.sina.com.cn/u/vizzi',/*7*/
  12. 'http://justinyoung.cnblogs.com',/*8*/
  13. 'http://yuntian.cnblogs.com',/*9*/
  14. 'http://www.awflasher.com/blog/',/*10*/
  15. 'http://www.blueidea.com',/*11*/
  16. 'http://www.5d.cn',/*12*/
  17. 'http://www.chinavisual.com',/*13*/
  18. 'http://www.jb51.net',/*14*/
  19. 'http://www.makewing.com',/*15*/
  20. 'http://www.gettyimages.cn',/*16*/
  21. 'http://cssmania.com',/*17*/
  22. 'http://zhaolinangel.blog.163.com',/*18*/
  23. 'http://hi.baidu.com/real_sharp',/*19*/
  24. 'http://atlas.ngacn.com',/*20*/
  25. 'link21',/*21*/
  26. 'link22',/*22*/
  27. 'link23',/*23*/
  28. 'link24',/*24*/
  29. 'link25',/*25*/
  30. 'link26',/*26*/
  31. 'link27',/*27*/
  32. 'link28',/*28*/
  33. 'link29',/*29*/
  34. 'link30',/*30*/
  35. 'link31',/*31*/
  36. 'link32',/*32*/
  37. 'link33',/*33*/
  38. 'link34',/*34*/
  39. 'link35' /*35*/]
  40. var linktitle = [
  41. 'http://www.chaoketu.com/u/snake/',/*0*/
  42. 'http://jiemomavis.blogbus.com',/*1*/
  43. 'http://blog.sina.com.cn/phoenix99',/*2*/
  44. 'http://az2525775.spaces.live.com',/*3*/
  45. 'http://26438411.qzone.qq.com',/*4*/
  46. 'http://www.v2xe.cn/',/*5*/
  47. 'http://blog.sina.com.cn/u/1232697295',/*6*/
  48. 'http://blog.sina.com.cn/u/vizzi',/*7*/
  49. 'http://justinyoung.cnblogs.com',/*8*/
  50. 'http://yuntian.cnblogs.com',/*9*/
  51. 'http://www.awflasher.com/blog/',/*10*/
  52. 'http://www.blueidea.com',/*11*/
  53. 'http://www.5d.cn',/*12*/
  54. 'http://www.chinavisual.com',/*13*/
  55. 'http://www.jb51.net',/*14*/
  56. 'http://www.makewing.com',/*15*/
  57. 'http://www.gettyimages.cn',/*16*/
  58. 'http://cssmania.com',/*17*/
  59. 'http://zhaolinangel.blog.163.com',/*18*/
  60. 'http://hi.baidu.com/real_sharp',/*19*/
  61. 'http://atlas.ngacn.com',/*20*/
  62. 'link21',/*21*/
  63. 'link22',/*22*/
  64. 'link23',/*23*/
  65. 'link24',/*24*/
  66. 'link25',/*25*/
  67. 'link26',/*26*/
  68. 'link27',/*27*/
  69. 'link28',/*28*/
  70. 'link29',/*29*/
  71. 'link30',/*30*/
  72. 'link31',/*31*/
  73. 'link32',/*32*/
  74. 'link33',/*33*/
  75. 'link34',/*34*/
  76. 'link35' /*35*/]
  77. var bottle=new Array();
  78. function generateMixed(n) {
  79.     var res = "";
  80.         var s="";
  81.     for(var i = 0; i < n ; i ++)
  82.                 {
  83.                           do
  84.                                 {
  85.                                         var id = Math.ceil(Math.random()*35);
  86.                                 }
  87.                         while (check(id,n))
  88.                 bottle[i]=id;
  89.  
  90.         res += chars[id];
  91.                 }
  92.     return res;
  93. }
  94.  
  95. function check(id,n)
  96. {
  97.         for(var i = 0; i < n ; i ++) 
  98.                 {
  99.                         if (bottle[i]==id)
  100.                         {
  101.                                 return true;
  102.                         }
  103.                 }
  104.         return false;
  105. }
  106. generateMixed(8)
  107. for (i in bottle)
  108. {
  109. document.write('<div class="kelelinks"><a href="'+weblink[bottle[i]]+'" title="'+linktitle[bottle[i]]+'" target="_blank"><img src="images/'+bottle[i]+'.gif" /></a>')
  110. if (i % 2)
  111. {
  112. document.write('<div class="clear"></div>')
  113. }
  114. }
  115. // --></script>

下面的是在学习的时候遇到的一些方法

  1. <script type="text/javascript"><!--
  2. var m=3; //随机显示图片的总数量
  3. var n=Math.floor(Math.random()*m+1)
  4. switch(n)
  5. {
  6. case 1:
  7. document.write('<img src="1.jpg" mce_src="http://www.52004.com.cn/wp-admin/1.jpg">'); //第1个随机显示的图片地址
  8. break;
  9. case 2:
  10. document.write('<img src="2.jpg" mce_src="http://www.52004.com.cn/wp-admin/2.jpg" />'); //第2个随机显示的图片地址
  11. break;
  12. case 3:
  13. document.write('<img src="3.jpg" mce_src="http://www.52004.com.cn/wp-admin/3.jpg" />'); //第3个随机显示的图片地址
  14. break;
  15. }
  16. // --></script>

方法二，根据载入时间的不同来生成图片排列

  1. <script type="text/javascript"><!--
  2. < !－－
  3. imglink=new Date();
  4. var thisimg="1.jpg";
  5. if(imglink.getSeconds()&amp;lt;54){var thisimg="2.jpg";}
  6. if(imglink.getSeconds()&amp;lt;46){var thisimg="3.jpg";}
  7. if(imglink.getSeconds()&amp;lt;39){var thisimg="4.jpg";}
  8. if(imglink.getSeconds()&amp;lt;32){var thisimg="5.jpg";}
  9. if(imglink.getSeconds()&amp;lt;24){var thisimg="6.jpg";}
  10. if(imglink.getSeconds()&amp;lt;17){var thisimg="7.jpg";}
  11. if(imglink.getSeconds()&amp;lt;9){var thisimg="8.jpg";}
  12. document.write("<img src="＋thisimg＋" mce_src="http://www.52004.com.cn/wp-admin/＋thisimg＋" border=0 alt="每次打开本页，看到的图片都不同！">");
  13. //－－>
  14. // --></script>

你可能对这个有点兴趣：

我也要评论

Kele’s Home is powered by Wordpress.