1日ごとに画像を変更したい

2015/10/01 21:29

このQ&Aのポイント

ウェブページで1日ごとに画像を変更したいです。
あるディレクトリ内にある画像名を取得し、日にちとは関係のない、今後増えていくであろう画像を一つずつ順繰り表示させる処理を行いたいです。
現在の実装内容は、PHPで指定したディレクトリ内の拡張子が「.png」の画像名を取得し、ソートして配列に格納しています。

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"]; ご教授よろしくお願いいたします。

paranoaman
お礼率91% (21/23)

JavaScript
回答数2
ありがとう数4

みんなの回答 （2）
専門家の回答

質問者が選んだベストアンサー

ベストアンサー

m_matsubara
ベストアンサー率48% (80/166)

2015/10/02 13:25 回答No.2

基準となる日からの日数差を求める、という意味でなら下のコードみたいになるでしょうか。 startDateが基準日で"2015/9/1"からの日数差なので31になります。 $(function(){ var imgAry = <?php echo json_encode( $imgAry ); ?>; var imgCount = imgAry.length; t = new Date(); // 日数差を計算 var num = Math.floor((t.getTime()-startDate.getTime())/(60*60*24*1000)); img = imgAry[num % imgCount]; console.log(img); });

質問者

お礼 2015/10/05 15:53

まさにやりたい事ができました！ありがとうございます！ベストアンサーに選ばせていただきます！！

その他の回答 (1)

Hanagefactory
ベストアンサー率58% (42/72)

2015/10/02 11:12 回答No.1

「毎日順序に従って変える」ということは、日付から何番目かを割り出す必要があります。その為には・前日は何番目まで表示したかの情報を保持するまたは・基準日を決めてそこから今日との差分計算するなど、情報をもう一つ与えてやる必要があります。そうしないと何番目かを特定させるのは不可能です。基準日のやりかたで言えば (今日 - 基準日) % 画像数 = 表示させる画像の配列みたいなことです

質問者