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

是否可以每隔几秒将图片网址更改为另一个文件？

Answer 1

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

这是链接：

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

以下是DEMO：

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

Answer 2

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

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

在CSS中更改图像？

2 个答案: