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だけでは不可能です。5秒の間隔の後で言ったように、これを行うには、ある種のJavaScriptを活用する必要があります。関数を使用することをお勧めしますsetTimeout()。JavaSCriptを使用してページの背景色を変更するスクリプトを作成しました。これを利用して、背景色の代わりに画像を変更することをお勧めします。

リンクは次のとおりです。

http://codeforbrowser.com/blog/changing-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 に答える