- 2021-5-25
成品效果
以前分享过一些api:http://blog.zhijianwenku.com/153.html
大概就长这样子
首先在根目录下面创建一个api.php文件
文件里面放下面代码:
<?php //存有美图链接的文件名img.txt $filename = "img.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")); } ?>然后在创建一个放图片的文件img.txt(文件名可改)，里面放你想随机展示的图片。
图片链接格式如图:
到这里你就可以访问:http://你的域名/api.php
你的图片api已经大功告成了
这个结果是随机显示一张图片，当你刷新时还是这张图片，除非你退出来再次输入域名:http://你的域名/api.php你将才会得到新的图片，所以用来做随机浏览相册就不合适了，只能用来第三方调用
那么如何解决可以直接刷新显示下一张图片，做成随机浏览的相册呢？
1.需要新建一个index.php文件
2.里面放下面首页刷新模板代码(参考注释修改成你刚刚创建的api进行调用)
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <meta name='referrer' content="never"> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0" /> <title>随机福利GIF动态图片</title> <meta name="keywords" content="智卓星网,API,API数据接口,免费API数据调用 ,二次元API,二维码API ,随机图片API，随机美女图片，随机高清壁纸，随机福利图片，随机图片， 随机美图，程序源码更新地址www.zy40.cn"/> <style> body{margin:0;padding:0;text-align:center;font-family:Helvetica ,Arial,"PingFang SC","Microsoft YaHei","WenQuanYi Micro Hei" ,"tohoma,sans-serif"} a,button.submit{color:#6e7173;text-decoration:none;-webkit -transition:all .1s ease-in;-moz-transition:all .1s ease-in;-o -transition:all .1s ease-in;transition:all .1s ease-in} a:active,a:hover{color:#6e7173} header{margin:0 auto;padding-top:50px;color:#444;text-align:center ;letter-spacing:2px;font:normal 150px/1 "Helvetica Neue" ,Helvetica,Arial} header i{font-style:normal} article{width:100%;background:#fff;background-size:auto 100%;text -shadow:1px 1px 0 #fff} article img{width:30%;min-width:360px;border-radius:20px} footer{margin:30px 0;font-size:10px;} .btn{display:inline-block;margin-top:24px;padding:0 25px;height :36px;border:1px solid #ccc;border-radius:16px;background:#444 ;background-color:#fff;color:#999;text-align:center;text-shadow :none;white-space:nowrap;letter-spacing:1px;font-size:14px;line -height:36px;cursor:pointer;-webkit-transition-duration:.4s ;transition-duration:.4s;-moz-user-select:-moz-none;-webkit -user-select:none;-ms-user-select:none;-o-user-select:none;user -select:none} .btn:hover{outline-style:none;border-color:#f77b83;color:#f77b83} </style> </head> <body> <header> </header> <article> <a href="javascript:document.location.reload(true);" title="" target="_self" ><img src="http://你的域名填在这里进行调用/api.php" alt="美图秀"></a> </article> <footer> <b> <a href="javascript:history.back()" target="_blank" >返回上页</a> <a href="javascript:location.reload();"class="btn">随机下一张</a ></b> <br> </footer> <p>点击随机下一张或点击图片即可随机更换其他图</p> </div> <script language="javascript" type="text/javascript" src="http://js .users.51.la/18759442.js"></script> </body> </html>3.这个时候你访问你的域名即可:http://你的域名
附其他刷新模板代码自己去研究哦，换成你的api进行调用就可以了。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name='referrer' content="never"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>随机妹子图片</title> <meta name="keywords" content="智卓星网,API,API数据接口,免费API数据调用 ,二次元API,二维码API ,随机图片API，随机美女图片，随机高清壁纸，随机福利图片，随机图片，随机 美图，程序源码更新地址www.zy40.cn"/> <style> html, body { font-size: 20px; margin: 0; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; } .bg { width: 100%; height: 100%; position: fixed; z-index: -1; background-position: center; background-repeat: no-repeat; background-attachment: fixed; background-size: cover; animation: bg 10s infinite; } #bg1 { background-image: url('http://h.zy40.cn/t/tmm/wb/get.php' ); } #bg2 { animation-delay: 5s; /* bg2延迟5秒开始。同时bg2一开始无图片，使bg1淡入时背景为 白色而不是另一张图片 */ } @keyframes bg{ 0%{transform: scale(1.5, 1.5);opacity: 0;} 20%{opacity: 1;} /* 0~2s 载入 */ 30%{transform: scale(1, 1);} /* 0~3s图片缩放 */ 50%{opacity: 1;} /* 5~7s 淡出 */ 70%{opacity: 0;} /* 7~10s 图片隐藏。另一个背景在本背景淡出同时载入 */ 100%{opacity: 0;} } </style> </head> <body> <div id="bg2"></div> <div id="bg1"></div> <script type="text/javascript"> countImg = 1; countTime = 0; bg1Container = document.getElementById("bg1"); bg2Container = document.getElementById("bg2"); setInterval(function(){ // 一个轮回为10秒（2个图片，第1张0-5s，第2张5 -10s），每个背景在淡出后（第7秒）更新图片 countTime += 1; if(countTime % 10 == 7){ countImg += 1; bg1Container.style = `background-image: url(http://h .zy40.cn/t/tmm/wb/get.php/?${countImg})`; }else if((countTime + 5) % 10 == 7){ // 第2张图片默认无图片，比第一张延迟5s开始动画， +5保证了在第2秒开始加载图片 countImg += 1; bg2Container.style = `background-image: url(http://h .zy40.cn/t/tmm/cos/get.php/?${countImg})`; } }, 1000); // // 延迟全屏 // setTimeout(function(){ // fullScreen(); // }, 1000); // // 全屏 // function fullScreen(){ // var el = document.documentElement; // var rfs = el.requestFullScreen || el .webkitRequestFullScreen || el.mozRequestFullScreen || el .msRequestFullScreen; // //typeof rfs != "undefined" && rfs // if (rfs) { // rfs.call(el); // } // else if (typeof window.ActiveXObject !== "undefined") { // //for IE，这里其实就是模拟了按下键盘的F11，使浏览器全屏 // var wscript = new ActiveXObject("WScript.Shell"); // if (wscript != null) { // wscript.SendKeys("{F5}"); // } // } // } </script> <script language="javascript" type="text/javascript" src="http ://js.users.51.la/18759442.js"></script> </body> </html>