生成一个html，图像在5秒后改变 [英] genrating an html with image changing after 5 seconds

问题描述

我知道基本的html，

有什么方法可以生成一个html，其中有4个图像，每隔5秒就刷新一次图像。



提前谢谢

I know basic html,
is there any way i can generate an html which has 4 images where image refreshes after every 5 seconds.

Thanks in advance

推荐答案

尝试间隔事。看看Javascript setTimeout 函数：

教程 - 使用setInterval和setTimeout [ ^ ]

Javascript计时器 [ ^ ]

Try interval thing. Have a look at the Javascript setTimeout function:
Tutorial - Using setInterval and setTimeout[^]
Javascript Timers[^]

有两种方法：

There are two ways:

1. 动画GIF。谷歌有点。我最喜欢的图像编辑器是GIMP（至少可用于Linux和Windows），但您可能更喜欢其他编辑器。基本上，你创建一个重复的''电影''，每5秒显示一帧，然后循环回到开头。
2. 使用Javascript，参见 http://www.w3schools.com/js/js_timing.asp [ ^ ];你可以使用 setInterval（），并且替换img标签的src属性，或者（稍微提高一点），改变img的样式展示不同的精灵。我们的想法是，如果您有4个图像，每个图像为200x100像素，则将它们保存为200x400更大的图像，并使用css更改可见部分的偏移，例如滑动视口后面的图像。
   
   

1. Animated GIF. Google a bit. My favorite image editor is GIMP (available for Linux and Windows at least), but you may prefer another. Basically, you create a repeating ''movie'' that shows one frame every 5 seconds, and then loops back to the beginning.
2. Use Javascript, see http://www.w3schools.com/js/js_timing.asp[^]; you may use setInterval(), and either replace the "src" attribute of a "img" tag, or (a little more advanced), change the style of the "img" to show different sprites. The idea is that if you have 4 images, each of them 200x100 pixels, you save them as a 200x400 bigger image, and you use css to change the offset of the visible part, like ''sliding'' the image behind a viewport.
   

您的选择取决于可用的工具（图像编辑器）和您的个人喜好（您想要锐化您的Javascript和CSS吗？或者没有）。



希望这会有所帮助，

Pablo。

Your choice depends on the available tools (image editor), and your personal preference (do you want to sharpen your Javascript and CSS, or not).

Hope this helps,
Pablo.

这篇关于生成一个html，图像在5秒后改变的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！