如何用PHP和JQuery制作一个小图库

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了如何用PHP和JQuery制作一个小图库相关的知识，希望对你有一定的参考价值。

This is the code to make a simple gallery really fast, with php, jquery and a dir full of pictures.
  1. <?
  2.  
  3. //---------------------------------------------
  4. //Php Function to read the images in a dir
  5. function getJsArray($dir) {
  6.     $out = "";
  7.     if ($dh = opendir($dir)) {
  8.         while (($file = readdir($dh)) !== false)
  9.             if(in_array( substr(strrchr($file, '.'), 1) , array('gif','png','jpg') )) $out.= ($out?",":"")."'".$dir.$file."'";
  10.         closedir($dh);
  11.     } else { die ("no dir"); }
  12.     return $out;
  13. }
  14.  
  15. ?>
  16.  
  17. <html>
  18. <head>
  19.     <title>Mini PHP-Jquery Gallery/Slideshow</title>
  20.     <script type="text/javascript" src="jquery.js"></script>
  21.     <script type="text/javascript">
  22.  
  23.     //---------------------------------------------
  24.     var gallery_current_pos = 0;            // gallery counter position
  25.     var gallery_idname = "container";        // id of the gallery container
  26.     var gallery_timer = 5000;                // 5 seconds
  27.     var gallery_ar = Array(<?=getJsArray("./minislides/")?>);
  28.  
  29.     function goGallery() {
  30.         if (gallery_current_pos>gallery_ar.length - 1) gallery_current_pos =0;
  31.         $('#'+gallery_idname).fadeTo("fast", 0 , function () {
  32.             $('#'+gallery_idname).css("background-image","url(" + gallery_ar[gallery_current_pos] + ")");    
  33.             $('#'+gallery_idname).fadeTo("slow", 1);
  34.             gallery_current_pos++;
  35.         });
  36.         if (gallery_ar.length>1) setTimeout(    function () { goGallery(); }, gallery_timer);
  37.     }
  38.     //---------------------------------------------
  39.  
  40.  
  41.     </script>
  42.     <style>
  43.  
  44.         #container {background-repeat:no-repeat;width:300px;height:200px;}
  45.  
  46.     </style>
  47. </head>
  48. <body onload="goGallery();">
  49.  
  50.     <div id='container'>&nbsp;</div>
  51.  
  52. </body>
  53. </html>

以上是关于如何用PHP和JQuery制作一个小图库的主要内容，如果未能解决你的问题，请参考以下文章

如何用jquery制作进度条？

如何用jquery实现焦点图上下轮播（仅仅用图片不要缩略图）， 带上下箭头？

如何用 PHP 制作一个简单的登录系统？ [关闭]

如何用opengl制作低分辨率图形？ [关闭]

如何用jQuery和CSS3制作数字时钟

试图学习如何用 python 制作一个不和谐的机器人。每次我尝试启动代码时都会出现相同的错误