一定時間で画像切替 | SIRIUSシリウスjavascript

トップページ＞ Java scriptとの組合せ＞一定時間で画像切替

～お知らせ～
要望にお応えしLUREA購入特典もSIRIUSと同じ特典にしました！
購入特典にオリジナルテンプレートを追加しました！

一定時間で画像を切替る方法①

下の画像はどんどん画像を切り替えている状態になります。

なんだか時限爆弾のようなカウントですが笑、
これはいま、5枚の画像を１秒で切替えてループさせています☆

簡易アニメーションやさくっと写真を見てもらいたい場合に、
使えそうですね♪
スペースが取らないので、多数の広告をループさせるのにも＾＾

では手順を紹介します＾＾

手順１

ホームメニューからサイト全体設定をクリックします。

手順２

モジュールの設定から新規追加をクリックします。
モジュール新規追加

手順３

モジュール名を入力します（例：一定時間で画像切替）
内容に下記ソースを入力してOKします。
ソース入力
＜内容ソース＞

<IMG SRC="<% pageDepth %>img/point1.gif"
alt="数字" width=50 height=50 name="count">
<SCRIPT language="javaScript">

    var sw=1;
    image=new Array(5);
    image[1]="<% pageDepth %>img/point1.gif ";
    image[2]="<% pageDepth %>img/point2.gif ";
    image[3]="<% pageDepth %>img/point3.gif ";
    image[4]="<% pageDepth %>img/point4.gif ";
    image[5]="<% pageDepth %>img/point5.gif ";

    hyouji();
    function hyouji()
    {
      setTimeout("hyouji()",1000);
      document.war.src=image[sw];
      sw=sw+1
      if (sw>5){sw=1;}
    }

</SCRIPT>

手順４

日時を表示したい場所で、右クリック→モジュールの挿入→一定時間で画像切替をクリックします。
モジュール選択
（※注意：画像では”今日”になっています。）

そして文中に↓このように表示されたら終わりです♪
<% module(一定時間で画像切替) %>

プレビューで確認してみましょう♪

また、変更箇所は下記になります。

<IMG SRC="<% pageDepth %>img/point1.gif" ←初期画像

width=50 height=50　←画像のサイズ

image[1]="<% pageDepth %>img/point1.gif ";　←画像１枚目
image[2]="<% pageDepth %>img/point2.gif ";　←画像２枚目
image[3]="<% pageDepth %>img/point3.gif ";　←画像３枚目
image[4]="<% pageDepth %>img/point4.gif ";　←画像４枚目
image[5]="<% pageDepth %>img/point5.gif ";　←画像５枚目
※画像の枚数によっては、行の削除、追加はimage[6]・・・としていけばよいです。

setTimeout("hyouji()",1000);　←1000で１秒

if (sw>5){sw=1;}　←5が画像の枚数

サイトに組み込むことで、動きのある楽しめるサイトになりますよね♪
また使用の際のポイントは、
・画像の枚数が多過ぎないこと（見きるのに疲れちゃいます）
・画像の容量が大きすぎないこと（大きいとサイト表示が遅くなります＞＜；）

是非使ってみてくださいね♪

次は、一定時間で画像を切替える方法②で、画像をフェードイン/フェードアウトで繋げる
クロスフェードの方法をご紹介します！
画像の切替に高級感がでます（笑）