blocks|key|391207|text|在基本级别上，您要做的是定义一个图像名称数组，然后从给定的时间点开始取天数，然后以图像的数量取模(除法后的余数)，并访问数组中的索引并设置图像，例如(未测试的代码)|type|unstyled|depth|inlineStyleRanges|entityRanges|data|391208|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)+%25+images.length;
document.GetElementById('imageId').setAttribute('src',+images[imageIndex]);|code-block|syntax|javascript|391209|请记住，任何客户端解决方案都将使用客户端的日期和时间，因此，如果您对午夜的定义是指您所在的时区，那么您将需要在服务器上使用PHP执行类似的操作。|391210|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

At a basic level what you want to do is define an array of image names then take the number of days from a given point in time then modulo (remainder after division) by the number of images and access that index in the array and set the image, e.g. (untested code)

<pre><code>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]);
</code></pre>

Bear in mind that any client-side solution will be using the date and time of the client so if your definition of midnight means in your timezone then you'll need to do something similar on your server in PHP.

blocks|key|2301432|text|也许我不理解这个问题。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2301433|如果您只想更改映像，请编写一个批处理文件/cron作业，并让它每天运行。|2301434|如果你想在周一显示某个图像，而在周二显示不同的图像，那么可以这样做：|2301435|<?php
switch(date('w'))
+{
++case+'1':
+++//Monday
+++break;
++case+'2':
+++//Tuesday:
+++break;
...
}
?>|code-block|syntax|javascript|2301436|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|N|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|O|8|@]|9|@]|A|$]]|$1|F|3|G|5|H|7|P|8|@]|9|@]|A|$I|J]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

Maybe I don't understand the question. 
If you just want to change the image write a batch file/cron job and have it run every day. 
If you want to display a certain image on Monday, and a different one of Tuesday then do something like this:
 

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

blocks|key|394430|text|我会在午夜后第一次访问时这样做。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|394431|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

I'd do it on first access after midnight.

blocks|key|5484228|text|它甚至不需要在cron中：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|5484229|<?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+%25+count($images)]
?>

<img+src="<?php+echo+$imageFilename;+?>"/>|code-block|syntax|javascript|5484230|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

It doesn't even have to be in cron:

<pre><code>&lt;?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)]
?&gt;

&lt;img src="&lt;?php echo $imageFilename; ?&gt;"/&gt;
</code></pre>

blocks|key|2301525|text|编辑:我把这个问题完全误读为“__没有使用javascript/PHP的”。因此，请忽略此响应。我不会删除它，只是为了防止有人疯狂到想要使用这个方法。|type|unstyled|depth|inlineStyleRanges|offset|length|style|BOLD|entityRanges|data|2301526|如果没有Javascript、PHP或任何其他形式的脚本语言，就很难做到这一点。实际上，这将是非常人为的，因为即使是最基本的JS/PHP也是微不足道的。|2301527|无论如何，为了实际回答您的问题，我能想到的使用普通HTML的唯一方法是设置一个在午夜运行的shell脚本。这个脚本只会重命名你的文件。使用cron+(在linux上)或Windows+Task+Scheduler使用类似如下的脚本完成此操作：(后面是不可靠的伪代码，可以转换为您喜欢的任何格式)。|2301528|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|code-block|syntax|javascript|2301529|在您的HTML中，只需执行以下操作：|2301530|<img+src="path/to/current.jpg"+/>|2301531|每一天，current.jpg都应该换成新的东西。如果您正在使用任何类型的缓存控制，请确保更改它，以便它不会被缓存超过几个小时。|2301532|entityMap^0|H|J|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|W|8|@$9|X|A|Y|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|Z|8|@]|D|@]|E|$]]|$1|H|3|I|5|6|7|10|8|@]|D|@]|E|$]]|$1|J|3|K|5|L|7|11|8|@]|D|@]|E|$M|N]]|$1|O|3|P|5|6|7|12|8|@]|D|@]|E|$]]|$1|Q|3|R|5|L|7|13|8|@]|D|@]|E|$M|N]]|$1|S|3|T|5|6|7|14|8|@]|D|@]|E|$]]|$1|U|3|-4|5|6|7|15|8|@]|D|@]|E|$]]]|V|$]]

Edit: I totally misread this question as "without using javascript/PHP". So disregard this response. I'm not deleting it, just in case anyone was crazy enough to want to use this method.

Doing it without Javascript, PHP, or any other form of scripting language could be difficult. Well actually, it would just be very contrived, since it would be trivial with even the most basic JS/PHP.

Anyway, to actually answer your question, the only way I can think of doing it with vanilla HTML is to set up a shell script to run at midnight. That script would just rename your files. Do this with cron (on linux) or Windows Task Scheduler with a script kinda like this: (dodgy pseudo code follows, convert to whatever you're comfortable with).

<pre><code>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
</code></pre>

In your HTML, just do this:

<pre><code>&lt;img src="path/to/current.jpg" /&gt;
</code></pre>

And every day, current.jpg should change to something new. If you're using any sort of cache-control, make sure to change it so that it doesn't get cached for longer than a few hours.

blocks|key|3372678|text|如果您运行的是linux系统，则可以设置Cron+Job；如果是在windows系统上，则可以使用windows任务计划程序。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|3372679|entityMap|0|LINK|mutability|MUTABLE|url|http://www.sitepoint.com/article/introducing-cron/^0|K|8|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@$A|M|B|N|1|O]]|C|$]]|$1|D|3|-4|5|6|7|P|8|@]|9|@]|C|$]]]|E|$F|$5|G|H|I|C|$J|K]]]]

If you are running a linux system you can set a <a href="http://www.sitepoint.com/article/introducing-cron/" rel="nofollow noreferrer">Cron Job</a> or you can use the windows task scheduler if you are on windows

blocks|key|5484138|text|您有两个选择。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|5484139|5484140|在JavaScript中，如果你有超过7个镜像，你基本上是让它根据一周中的某一天或一个月的某一天来选择一个镜像。以图像数组的长度取模应该可以让你选择正确的数组元素。|ordered-list-item|5484141|你需要一些更有状态的东西来跟踪发生的事情……使用SQL，您可以跟踪图像的使用时间并从轮换列表中进行选择。您还可以使用由PHP维护的文本文件来跟踪有序列表。|5484142|5484143|老式的方法是让cron作业旋转图像，但现在我会避免这样做。|5484144|entityMap^0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|N|8|@]|9|@]|A|$]]|$1|C|3|D|5|E|7|O|8|@]|9|@]|A|$]]|$1|F|3|G|5|E|7|P|8|@]|9|@]|A|$]]|$1|H|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|I|3|J|5|6|7|R|8|@]|9|@]|A|$]]|$1|K|3|-4|5|6|7|S|8|@]|9|@]|A|$]]]|L|$]]

You have two options.

<ol>
<li>In JavaScript, you basically have it choose an image based on the day of the week or day of the month if you have more than 7 images. Day of the month modulo by the length of the image array should let you pick the right array element.</li>
<li>You need something a bit more stateful to track what's going on... using SQL you can track when images are used and pick from the rotating list. You could also use a text file maintained by PHP to track the ordered list.</li>
</ol>

The old school way is to have a cron job rotate the image, but I'd avoid that these days.

blocks|key|3372808|text|这取决于你是如何旋转它们的--顺序的，随机的，还是什么？|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3372809|有很多选择。您可以确定要在PHP中使用哪个图像，并动态更改<img>元素以指向正确的位置。如果你已经在动态生成你的页面，这是最好的。|offset|length|style|CODE|3372810|您可以始终指向单个URL，该URL是一个PHP文件，用于确定要显示的图像，然后执行302重定向到该图像。如果您有不想引起动态生成开销的静态页面，这会更好。|3372811|不要让图像URL本身服务于不同的图像。您将无缘无故地搞乱缓存命中率，并在本应是静态资源的资源上产生不必要的开销。|3372812|马丁，在本文中，“旋转”的意思是“定期改变”，而不是“绕轴旋转”。|3372813|entityMap^0|0|T|5|0|0|0|0^^$0|@$1|2|3|4|5|6|7|P|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|Q|8|@$D|R|E|S|F|G]]|9|@]|A|$]]|$1|H|3|I|5|6|7|T|8|@]|9|@]|A|$]]|$1|J|3|K|5|6|7|U|8|@]|9|@]|A|$]]|$1|L|3|M|5|6|7|V|8|@]|9|@]|A|$]]|$1|N|3|-4|5|6|7|W|8|@]|9|@]|A|$]]]|O|$]]

That depends on how you are rotating them - sequentially, randomly, or what?

There are a number of options. You can determine which image you want in PHP, and dynamically change your <code>&lt;img&gt;</code> element to point to the correct location. This is best if you are already generating your pages dynamically.

You can always point to a single URL, which is a PHP file that determines which image to show and then performs a 302 redirect to it. This is better if you have static pages that you don't want to incur the overhead of dynamic generation for.

Don't make the image URL itself serve different images. You'll screw up your cache hit ratio for no good reason and incur unnecessary overhead on what should be a static resource.

Martin, "rotate" in this context means "change on a regular basis", not "turn around an axis".

blocks|key|391255|text|这取决于(TM)你到底想要达到什么目标。只是想显示一个“随机”的图像吗？也许这段javascript代码会让你入门：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|391256|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_'+%2B+(day+%25+10)+%2B+'.gif';|code-block|syntax|javascript|391257|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

It depends (TM) on what exactly you want to achieve. Just want to display a "random" image? Maybe this javascript snippet will get you started:

<pre><code>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';
</code></pre>

blocks|key|394536|text|我假设您所说的“旋转图像”是指“改变正在使用的图像”，而不是“围绕轴的旋转变换”--一种简单的方法是有一个哈希表，它将day模X映射到图像名称。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|394537|$imgs+=+array("kitten.jpg",+"puppy.gif","Bob_Dole.png");++++
$day_index+=+365+*+date("Y")+%2B+date("Z")

...

<img+src="<?+$imgs[$day_index+%25+count($imgs)]+?>"+/>|code-block|syntax|javascript|394538|(如果语法错误，我很抱歉，我不太了解PHP)|394539|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

I assume by "rotate image" you mean "change the image in use" and not "rotational transformation about an axis" -- a simple way is to have a hash table that maps day modulo X to an image name.

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

...

&lt;img src="&lt;? $imgs[$day_index % count($imgs)] ?&gt;" /&gt;
</code></pre>

(sorry if I got the syntax wrong, I don't really know PHP))

blocks|key|394563|text|设置图像目录。选择七个图像并将它们命名为0.jpg，1.jpg，2.jpg，3.jpg，4.jpg，5.jpg，6.jpg，使用mootools+Javascript框架，并在HTML中使用id为“rotatingimage”的图像标记：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|394564|var+d=new+Date();
var+utc+=+d.getTime()+%2B+(d.getTimezoneOffset()+*+60000);
var+offset+=+-10;++//+set+this+to+your+locale's+UTC+offset
var+desiredTime+=+utc+%2B+(3600000*offset);
new+dd+=+new+Date(desiredTime);+
$('rotatingimage').setProperty('src',+dd.getDay()+%2B+'.jpg');+|code-block|syntax|javascript|394565|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

Set up a directory of images. 
Select seven images and name them 0.jpg, 1.jpg, 2.jpg, 3.jpg, 4.jpg, 5.jpg, 6.jpg, 
Using mootools Javascript framework with an image tag in HTML with id "rotatingimage":

<pre><code>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'); 
</code></pre>

blocks|key|394572|text|这里有一个解决方案，它将每天从一个目录中随机选择一个图像，这可能比这里发布的一些其他解决方案更容易，因为您需要做的所有事情都是上传它，而不是编辑一个数组，或者以任意的方式命名文件。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|394573|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%2503d%25d",+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)];
}|code-block|syntax|javascript|394574|唯一的问题是，有可能连续两天看到相同的图像，因为这是随机选择的。如果你想按字母顺序获得它们，那么可以使用这个。(仅更改最后两行)|394575|function+getImageOfTheDay()+{
++++$myDir+=+"path/to/images/";
++++$day+=+sprintf("1%2503d%25d",+date('z'),+date('Y'));
++++$jpgs+=+glob($myDir+.+"*.jpg");
++++return+$jpgs[$day+%25+count($jpgs)];
}|394576|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

Here's a solution which will choose a random image per day from a directory, which might be easier than some other solutions posted here, since all you have to do to get something into the rotation is upload it, rather than edit an array, or name the files in arbitrary ways.

<pre><code>function getImageOfTheDay() {
 $myDir = "path/to/images/";

 // get a unique value for the day/year.
 // 15th Jan 2008 -&gt; 10152008. 3 Feb -&gt; 10342008, 31 Dec -&gt; 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)];
}
</code></pre>

The only thing is that there's a possibility of seeing the same image two days in a row, since this picks it randomly. If you wanted to get them sequentially, in alphabetical order, perhaps, then use this. (only the last two lines are changed)

<pre><code>function getImageOfTheDay() {
 $myDir = "path/to/images/";
 $day = sprintf("1%03d%d", date('z'), date('Y'));
 $jpgs = glob($myDir . "*.jpg");
 return $jpgs[$day % count($jpgs)];
}
</code></pre>

I need to rotate an image at 12 midnight every day from a group of 5-10 images. How can I go about doing this with JavaScript or jQuery or even PHP?

How do I rotate an image at 12 midnight every day?

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

我需要在每天午夜12点从一组5-10张图像中旋转一张图像。我该如何用JavaScript或jQuery甚至PHP来做这件事呢？

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

回答 12

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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

回答 12

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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