1日ごとに画像を変更したい。
すみません、質問させてください。
ウェブページで1日ごとに画像を変更したいです。
ランダムではありません。
あるディレクトリ内にある画像名を取得し、（1.png,2.png,4.png,7.pngこのように連番ではない画像名です。）その配列のキーを1日ごとにずらしていくイメージです。
画像の取得はphpで行いjson_encodeした配列をjavascript側で処理しようかと考えています。
日にちとはまったく関係のない、今後増えていくであろう画像を一つずつ順繰り表示させマックスまで行ったら一つ目の画像に戻り繰り返す、というような処理を行いたいのですがjavascriptに弱くよくわかりません。
今のところの実装内容は以下になります。
<?php
// ディレクトリのパス
$path = "img/";
// 画像名を格納する配列
$imgAry = array();
// パスのディレクトリが存在するかチェックしディレクトリの中を開く
if( is_dir( $path ) && $handle = opendir( $path ) ){
// 画像名を取得
while( ( $file = readdir( $handle ) ) !== false ){
// 画像の拡張子が「.png」の画像のみを配列に格納
if( preg_match( '/\.png$/i', $file ) ){
$imgAry[] = $file;
}
}
}
// 昇順にソート
asort( $imgAry );
?>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>javascript test</title>
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript" charset="utf-8">
$(function(){
var imgAry = <?php echo json_encode( $imgAry ); ?>;
var imgCount = imgAry.length;
t = new Date();
num = t % imgCount;
img = imgAry[num];
console.log(img);
});
</script>
</head>
<body>
画像名の配列は以下のように取得できる形を想定しております。
var imgAry = ["01.png","02.png","03.png","04.png","05.png","06.png","07.png","08.png","11.png","12.png","13.png","14.png","15.png","16.png","17.png","18.png","19.png","20.png","21.png","22.png","23.png","24.png","25.png","26.png","27.png","28.png","29.png","30.png","31.png","32.png","33.png","34.png","35.png","36.png","37.png","38.png","39.png","40.png","41.png","42.png","43.png","44.png","45.png","46.png","47.png","48.png","49.png","50.png","51.png","52.png"];
ご教授よろしくお願いいたします。
補足
WebViewを利用してHTML+CSS+JSで書く方法がありましたか・・・。 しかし、できればWebViewを使わず実装したいのですが、 方法はあるでしょうか。