Question

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

Answer 1

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

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

Answer 2

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

<?php
switch(date('w'))
 {
  case '1':
   //Monday
   break;
  case '2':
   //Tuesday:
   break;
...
}
?>

Answer 3

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

Answer 4

它甚至不必在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; ?>"/>

Answer 5

编辑：我完全误解了这个问题为“没有使用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应该变成新的东西。如果您正在使用任何类型的缓存控制，请确保将其更改为不会缓存超过几个小时。

Answer 6

如果您正在运行Linux系统，则可以设置Cron Job，或者如果您在Windows上，则可以使用Windows任务计划程序

Answer 7

您有两种选择。

在JavaScript中，如果您的图像超过7张，基本上可以选择基于星期几或日期的图像。以图像数组的长度为模的月份日期应该让您选择正确的数组元素。
你需要一些更有状态的东西来跟踪发生的事情......使用SQL你可以跟踪使用图像并从旋转列表中选择。您还可以使用PHP维护的文本文件来跟踪有序列表。

旧学校的方式是让一个cron作业旋转图像，但这些天我会避免这种情况。

Answer 8

这取决于你如何旋转它们 - 顺序，随机或什么？

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

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

不要让图片网址本身提供不同的图片。你没有充分的理由搞砸你的缓存命中率，并且应该在静态资源上产生不必要的开销。

马丁，在这种背景下“轮换”意味着“定期改变”，而不是“转过轴”。

Answer 9

取决于（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';

Answer 10

我假设“旋转图像”是指“更改正在使用的图像”而不是“围绕轴旋转变换” - 一种简单的方法是使用将日模X映射到图像名称的哈希表。 / p>

$imgs = array("kitten.jpg", "puppy.gif","Bob_Dole.png");    
$day_index = 365 * date("Y") + date("Z")

...

<img src="<? $imgs[$day_index % count($imgs)] ?>" />

（对不起，如果我的语法错误，我真的不懂PHP））

Answer 11

设置图像目录。选择七个图像并将它们命名为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');

Answer 12

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

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

Answer 13

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

选项包括：

在“午夜后首次访问”时触发旋转。假设某种启动事件（例如用户访问）
使用操作系统调度功能触发旋转（cron on * nix，at / task scheduler on Windows）
编写代码以检查时间和范围旋转

选项3存在编码不良的解决方案可能过度耗费资源的风险。

如何在每天午夜12点旋转图像？

13 个答案: