5〜10枚の画像のグループから、毎日深夜12時に画像を回転させる必要があります。JavaScriptやjQuery、さらにはPHPでこれを行うにはどうすればよいですか?
13 に答える
基本的なレベルでは、画像名の配列を定義し、特定の時点からの日数を取得してから、画像の数でモジュロ (除算後の剰余) を取得し、配列内のそのインデックスにアクセスして、画像、例 (テストされていないコード)
var images = new Array("image1.gif", "image2.jpg", "sky.jpg", "city.png");
var dateDiff = new Date() - new Date(2008,01,01);
var imageIndex = Math.Round(dateDiff/1000/60/60/24) % images.length;
document.GetElementById('imageId').setAttribute('src', images[imageIndex]);
クライアント側のソリューションはクライアントの日付と時刻を使用することに注意してください。そのため、真夜中の定義がタイムゾーンを意味する場合は、サーバーで PHP で同様のことを行う必要があります。
多分私は質問を理解していません。
イメージを変更したいだけの場合は、バッチ ファイル/cron ジョブを作成し、毎日実行します。
月曜日に特定の画像を表示し、火曜日に別の画像を表示したい場合は、次のようにします。
<?php
switch(date('w'))
{
case '1':
//Monday
break;
case '2':
//Tuesday:
break;
...
}
?>
真夜中以降の最初のアクセスでそれを行います。
cron にある必要さえありません。
<?php
// starting date for rotation
$startDate = '2008-09-15';
// array of image filenames
$images = array('file1.jpg','file2.jpg',...);
$stamp = strtotime($startDate);
$days = (time() - $stamp) / (60*60*24);
$imageFilename = $images[$days % count($images)]
?>
<img src="<?php echo $imageFilename; ?>"/>
編集:この質問を「javascript/PHPを使用せずに」と完全に読み違えました。したがって、この応答は無視してください。誰かがこの方法を使いたがるほど狂っていた場合に備えて、私はそれを削除しません.
Javascript、PHP、またはその他の形式のスクリプト言語なしでそれを行うのは難しい場合があります。実際には、最も基本的な JS/PHP でさえ些細なことなので、非常に不自然です。
とにかく、実際にあなたの質問に答えるには、バニラ HTML でそれを行う唯一の方法は、真夜中に実行するシェル スクリプトを設定することです。そのスクリプトは、ファイルの名前を変更するだけです。cron (Linux の場合) または Windows タスク スケジューラを使用して、次のようなスクリプトを使用してこれを行います。
let number_of_files = 5
rename current.jpg to number_of_files.jpg
for (x = 2 to number_of_files)
rename x.jpg to (x-1).jpg
rename 1.jpg to current.jpg
HTML で、次のようにします。
<img src="path/to/current.jpg" />
そして毎日、 current.jpg は何か新しいものに変わるはずです。何らかの種類のキャッシュ制御を使用している場合は、数時間以上キャッシュされないように変更してください。
画像を回転させる方法は、いくつかの方法で説明されています。ローテーションをトリガーするタイミングを検出する方法は、実行していることによって異なります(明確にして、人々がより良い答えを提供できるようにしてください)。
オプションは次のとおりです。
- 「深夜以降の最初のアクセス」でローテーションをトリガーします。ある種の開始イベント(ユーザーアクセスなど)を想定しています
- OSスケジューリング機能を使用して、ローテーションをトリガーします(* nixではcron、Windowsではat / taskスケジューラー)
- 時間を確認して回転するコードを書く
オプション3には、適切にコーディングされていないソリューションが過度にリソースを消費する可能性があるというリスクがあります。
Linux システムを実行している場合は、Cron ジョブを設定できます。Windows を使用している場合は、Windows タスク スケジューラを使用できます。
それは、順番に、ランダムに、または何を回転させるかによって異なります。
いくつかのオプションがあります。PHP で必要なイメージを決定し、<img>
要素が正しい場所を指すように動的に変更できます。これは、すでにページを動的に生成している場合に最適です。
いつでも単一の URL を指すことができます。これは、表示する画像を決定し、それに 302 リダイレクトを実行する PHP ファイルです。これは、動的生成のオーバーヘッドを発生させたくない静的ページがある場合に適しています。
画像 URL 自体が異なる画像を提供するようにしないでください。正当な理由もなくキャッシュ ヒット率を台無しにし、静的リソースであるべきものに不要なオーバーヘッドが発生します。
Martin 氏によると、このコンテキストでの「回転」は、「軸を中心に回転する」ではなく、「定期的に変化する」ことを意味します。
2 つのオプションがあります。
JavaScript では基本的に、画像が 7 つ以上ある場合は、曜日または日付に基づいて画像を選択します。画像配列の長さによる日モジュロにより、正しい配列要素を選択できるようになります。
何が起こっているかを追跡するには、もう少しステートフルなものが必要です... SQL を使用すると、画像がいつ使用されたかを追跡し、ローテーション リストから選択できます。PHP が管理するテキスト ファイルを使用して、順序付きリストを追跡することもできます。
古い学校の方法は、cron ジョブにイメージをローテーションさせることですが、最近はそれを避けています。
それは(TM)正確に何を達成したいかによって異なります。「ランダムな」画像を表示したいだけですか?おそらく、次の JavaScript スニペットから始めることができます。
var date = new Date();
var day = date.getDate(); // thats the day of month, use getDays() for day of week
document.getElementById('someImage').src = '/images/foo/bar_' + (day % 10) + '.gif';
「画像の回転」とは、「軸を中心とした回転変換」ではなく、「使用中の画像を変更する」ことを意味すると思います-簡単な方法は、日モジュロXを画像名にマップするハッシュテーブルを作成することです。
$imgs = array("kitten.jpg", "puppy.gif","Bob_Dole.png");
$day_index = 365 * date("Y") + date("Z")
...
<img src="<? $imgs[$day_index % count($imgs)] ?>" />
(構文が間違っていたらごめんなさい、PHPはよくわかりません))
画像のディレクトリを設定します。7 つの画像を選択し、それらに 0.jpg、1.jpg、2.jpg、3.jpg、4.jpg、5.jpg、6.jpg という名前を付けます。mootools Javascript フレームワークを使用して、HTML で ID "rotatingimage" の画像タグを使用します。
var d=new Date();
var utc = d.getTime() + (d.getTimezoneOffset() * 60000);
var offset = -10; // set this to your locale's UTC offset
var desiredTime = utc + (3600000*offset);
new dd = new Date(desiredTime);
$('rotatingimage').setProperty('src', dd.getDay() + '.jpg');
これは、ディレクトリから 1 日ごとにランダムな画像を選択するソリューションです。これは、ここに投稿された他のソリューションよりも簡単かもしれません。ローテーションに何かを入れるために必要なのは、配列や名前を編集するのではなく、アップロードすることだけだからです。ファイルを任意の方法で。
function getImageOfTheDay() {
$myDir = "path/to/images/";
// get a unique value for the day/year.
// 15th Jan 2008 -> 10152008. 3 Feb -> 10342008, 31 Dec -> 13662008
$day = sprintf("1%03d%d", date('z'), date('Y'));
// you could of course get gifs/pngs as well.
// i'm just doing this for simplicity
$jpgs = glob($myDir . "*.jpg");
mt_srand($day);
return $jpgs[mt_rand(0, count($jpgs) - 1)];
}
唯一のことは、これはランダムに選択されるため、同じ画像が 2 日連続で表示される可能性があることです。アルファベット順に順番に取得したい場合は、これを使用してください。(最後の 2 行のみが変更されます)
function getImageOfTheDay() {
$myDir = "path/to/images/";
$day = sprintf("1%03d%d", date('z'), date('Y'));
$jpgs = glob($myDir . "*.jpg");
return $jpgs[$day % count($jpgs)];
}