之前分享过一篇关于在网站中生成随机句子的文章 WordPress 博客集成 Hitokoto 一言经典语句功能,今天为大家再分享一下生成随机图片的过程,实现方案跟之前的一言生成方法类似,可以快速实现在网站中展示随机图片。
实现步骤
思路是将所有的图片地址保存在一个 txt 文本文档中,然后创建一个 PHP 文件,通过随机读取文本文件中的一行内容获取图片链接进而输出图片链接信息。
准备工作
在网站根目录下新建一个文件夹,命名为 meitu,用来存放生成随机图片的相关文件。
第一步:准备图片
在 meitu 文件夹下新建一个 image 文件夹,然后准备一些图片素材,以三张为例,分别命名为 ran_1.jpg,ran_2.jpg,ran_3.jpg,然后将这三张图片上传到该文件夹下。
第二步:准备图片链接文本
在 meitu 文件夹下新建一个文本文件 url.txt,将上述图片的链接地址保存到该文件中,每行一个。
第三步:准备 PHP 接口文件
在 meitu 文件夹下新建一个 PHP 文件 api.php,文件内容如下:
<?php // 存有美图链接的文件名url.txt $filename = "url.txt"; if(!file_exists($filename)){ die('文件不存在'); } // 从文本获取链接 $pics = []; $fs = fopen($filename, "r"); while(!feof($fs)){ $line=trim(fgets($fs)); if($line!=''){ array_push($pics, $line); } } // 从数组随机获取链接 $pic = $pics[array_rand($pics)]; // 返回指定格式 $type=$_GET['type']; switch($type){ // JSON返回 case 'json': header('Content-type:text/json'); die(json_encode(['pic'=>$pic])); default: die(header("Location: $pic")); } ?>
第四步、调用接口展示图片
通过浏览器访问 你的域名/meitu/api.php,每次刷新都会随机展示一张图片。如果要在网站中显示随机图片,可通过添加自定义 HTML 小部件添加下述代码:
<img id="beauty" src="https://www.pieruo.com/meitu/api.php" class="random">
效果预览如下:
刷新及轮播
可以实现图片自动刷新,或者轮播图效果,详见下述内容。
1、带定时刷新
如果想实现自动刷新功能,可添加定时任务,每隔固定时间刷新图片。
<script type="text/javascript"> window.setInterval(function(){ document.getElementById("beauty").src = "https://www.pieruo.com/meitu/api.php?t=" + new Date().getTime(); }, 30000); </script>
2、轮播图带滚动
如果想实现轮播图效果,可基于 bxslider 插件实现,示例 DEMO 已上传到网盘,详见文章末尾附件。
可将其做成一个独力的页面,通过自定义 HTML 小部件以 iframe 的形式引入,内容如下:
<iframe id="slider" src="https://www.pieruo.com/api/meitu/index.html" frameborder="0" scrolling="no" height="210px" width="100%" style="margin-bottom:-8px;"></iframe>
结束语
本文简单分享了一种在 PHP 中生成随机图片的实现方案,可以快速便捷的在自己的网站中添加随机图片。如果有任何意见或建议,欢迎在下方评论处留言。
本文已通过「原本」原创作品认证,转载请注明文章出处及链接。