1

我正在尝试为我的网站调整模板。我不是 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 更改为不同的文件？

4

2 回答 2

0

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

链接在这里：

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

下面是演示：

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

于 2013-01-13T05:28:35.627 回答
-1

如果它必须是严格的 CSS，我建议查看一些 CSS3 属性。否则我会研究 Jquery。

这是 CSS3 http://www.w3schools.com/css3/css3_transitions.asp的链接

于 2013-01-13T04:53:01.140 回答