javascript - 在 CSS 中更改图像？

Question

我正在尝试为我的网站调整模板。我不是 CSS 大师，但我正在尝试找到一种方法来更改计时器上的图像。问题是，模板是 CSS，我不知道如何制作非常简单的幻灯片。我只想每 5 秒左右更换一次图像。

这是我在 html 文件中的内容:

<div id="mainPicture">
  <div class="picture">
    <div id="headerTitle">Header Text</div>
     <div id="headerSubtext">Header Subtext</div>
  </div>
</div>

这是 CSS 内容:

#mainPicture
{
clear:both;
width:670px;
height:345px;
background-color:#160306;
}

#mainPicture .picture
{
position:relative;
width:650px;
height:325px;
top:10px;
margin-left:10px;
background-image:url(LOGO2.jpg);
background-repeat:no-repeat;
}

有什么方法可以每隔几秒将图像 url 更改为不同的文件？

Answer 1

仅靠 CSS 是不可能的。您需要利用某种 JavaScript 来按照您在 5 秒的间隔后所说的那样完成此操作。您可能想使用 setTimeout() 函数。我已经编写了一个脚本来使用 JavaSCript 更改页面的背景颜色。您可能想利用它来更改图像而不是背景颜色:

这是链接:

http://codeforbrowser.com/blog/changing-background-color-using-javascript-and-jquery/

下面是演示:

http://jsfiddle.net/refhat/gJWFR/1/