1

我需要在每天午夜 12 点从一组 5-10 张图像中旋转一张图像。我怎样才能使用 JavaScript 或 jQuery 甚至 PHP 来做到这一点？

4

13 回答 13

5

在基本级别上，您要做的是定义一个图像名称数组，然后从给定时间点取天数，然后以图像数量取模（除法后的余数）并访问数组中的索引并设置图片，例如（未经测试的代码）

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 中的服务器上执行类似的操作。

于 2008-09-15T20:15:36.830 回答
1

它甚至不必在 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; ?>"/>
于 2008-09-15T20:22:11.887 回答
1

编辑：我完全把这个问题误读为“不使用 javascript/PHP”。所以无视这个回应。我不会删除它，以防万一有人疯狂到想要使用这种方法。

在没有 Javascript、PHP 或任何其他形式的脚本语言的情况下执行此操作可能会很困难。好吧，实际上，它只是非常做作，因为即使是最基本的 JS/PHP 也是微不足道的。

无论如何，要真正回答您的问题，我能想到的使用 vanilla HTML 的唯一方法是设置一个在午夜运行的 shell 脚本。该脚本只会重命名您的文件。使用 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 都应该变成新的东西。如果您使用任何类型的缓存控制，请确保对其进行更改，使其缓存时间不会超过几个小时。

于 2008-09-15T20:22:19.403 回答
1

也许我不明白这个问题。
如果您只想更改图像，请编写一个批处理文件/cron 作业并让它每天运行。
如果您想在星期一显示某个图像，而在星期二显示另一个图像，请执行以下操作： 

<?php
switch(date('w'))
 {
  case '1':
   //Monday
   break;
  case '2':
   //Tuesday:
   break;
...
}
?>
于 2008-09-15T20:10:52.910 回答
1

我会在午夜后第一次访问时这样做。

于 2008-09-15T20:10:52.990 回答
0

这取决于你如何旋转它们——顺序、随机还是什么？

有多种选择。您可以在 PHP 中确定您想要的图像，并动态更改您的<img>元素以指向正确的位置。如果您已经动态生成页面，这是最好的。

您始终可以指向单个 URL，该 URL 是一个 PHP 文件，用于确定要显示的图像，然后执行 302 重定向。如果您有不想产生动态生成开销的静态页面，这会更好。

不要让图像 URL 本身提供不同的图像。您将无缘无故地提高缓存命中率，并在应该是静态资源的情况下产生不必要的开销。

Martin，在这种情况下，“旋转”的意思是“定期改变”，而不是“绕轴转动”。

于 2008-09-15T20:16:23.490 回答
0

这取决于（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';
于 2008-09-15T20:20:35.867 回答
0

我假设“旋转图像”是指“更改使用中的图像”而不是“围绕轴的旋转变换”——一种简单的方法是使用一个哈希表，将日期模 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））

于 2008-09-15T20:24:01.133 回答
0

设置图像目录。选择七个图像并将它们命名为 0.jpg、1.jpg、2.jpg、3.jpg、4.jpg、5.jpg、6.jpg，使用带有 id 为“rotatingimage”的 HTML 中的图像标签的 mootools Javascript 框架：

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');
于 2008-09-15T20:41:08.033 回答
0

这是一个每天从目录中选择随机图像的解决方案，这可能比此处发布的其他一些解决方案更容易，因为您只需上传它，而不是编辑数组或名称文件以任意方式。

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)];
}

唯一的问题是有可能连续两天看到相同的图像，因为这是随机选择的。如果您想按字母顺序依次获取它们，也许可以使用它。（只更改了最后两行）

function getImageOfTheDay() {
    $myDir = "path/to/images/";
    $day = sprintf("1%03d%d", date('z'), date('Y'));
    $jpgs = glob($myDir . "*.jpg");
    return $jpgs[$day % count($jpgs)];
}
于 2008-09-16T00:39:46.493 回答
0

已经以多种方式描述了如何旋转图像。如何检测何时触发轮换取决于您在做什么（请澄清，人们可以提供更好的答案）。

选项包括：

  1. 在“午夜后首次访问”时触发轮换。假设某种启动事件（例如用户访问）
  2. 使用操作系统调度功能触发轮换（*nix 上的 cron，Windows 上的 at/task 调度程序）
  3. 编写代码来检查时间和旋转

选项 3 存在编码不佳的解决方案可能会过度占用资源的风险。

于 2008-09-16T00:55:33.540 回答
0

如果您正在运行 linux 系统，则可以设置Cron 作业，或者如果您在 windows 上，则可以使用 windows 任务调度程序

于 2008-09-15T20:09:53.430 回答
0

你有两个选择。

  1. 在 JavaScript 中，如果您有超过 7 张图像，您基本上可以让它根据一周中的某天或一个月中的某天选择一张图像。以图像数组的长度为模的月份中的某天应该可以让您选择正确的数组元素。

  2. 您需要一些更有状态的东西来跟踪正在发生的事情......使用 SQL 您可以跟踪何时使用图像并从旋转列表中选择。您还可以使用 PHP 维护的文本文件来跟踪有序列表。

老派的方法是让一个 cron 工作轮换图像，但这些天我会避免这样做。

于 2008-09-15T20:16:10.170 回答