ホーム >  JavaScript >  プラグインを使用しないスライドショーを作る


Posted:2014/09/08 6:00:46 PM|Category : JavaScript

プラグインを使用しないスライドショーを作る

 スライドショーを簡単に作るWordressプラグインやJQueryは数多くあります。
しかし、使用できるブラウザのバージョンが限られてしまいます。
JavaScriptのみでスライドショーを再現してみました。

完成イメージ

 画像が「top1.jpg」→「top2.jpg」→「top3.jpg」と順番に切り替わります。
js001

ソースコード

<head>
<?php
echo '<script type="text/javascript">' . 'var templatePath = " ' . get_template_directory_uri() . '/images/" ;' . '</script>' ;
?>
<script>
<!--
//画像を配列に格納
var img = new Array();
 
img&#91;0&#93; = new Image();
img&#91;0&#93;.src = templatePath + "top1.jpg";
img&#91;1&#93; = new Image();
img&#91;1&#93;.src = templatePath + "top2.jpg";
img&#91;2&#93; = new Image();
img&#91;2&#93;.src= templatePath + "top3.jpg";
 
//画像パス格納配列の番号
var imgNum=0;
 
function start(){
 
  if (imgNum==0) {
    document.getElementById("gazo").src=img&#91;imgNum&#93;.src;
    imgNum=1;
  } else if (imgNum==1) {
     document.getElementById("gazo").src=img&#91;imgNum&#93;.src;
    imgNum=2;
  } else if (imgNum==2) {
     document.getElementById("gazo").src=img&#91;imgNum&#93;.src;
    imgNum=3;
  }
 
  setTimeout("start()", 3000);
 
  }
 
window.onload = function() {
  //ページ読み込み時に実行したい処理
  start();
}
//-->
</script>
</head>

<img id="gazo" src="<?php bloginfo('template_directory') ?>/images/top1.jpg" height="300px" width="400px" border="0" alt="">

解説

get_template_directory_uri()

 テンプレートのパス名(URI)を取得するWordPressの関数です。これをJavaScriptで利用するため、Scriptタブで囲みPHPの「echo」で出力します。

画像配列「img」

 画像配列「img」を作ります。 画像配列は特殊なため、以下のような作りになります。

画像パス格納配列の番号

 画像配列の番号を表します。この変数「imgNum」は画像を表示する度に変化していきます。

変数「imgNum」の判定

 表示する画像を変化させるため、if文を使って「imgNum」の値を判定します。

画像を切り替え

 id名を付した画像タグの画像を切り替えます。ここでは、id名「"gazo"」のimgタグに対して処理します。
document.getElementById("id名").src = 画像配列[].src

変数「imgNum」の値を切り替え

  if文を使って「imgNum」の値を変更します。この新しい値が次の画像番号です。

setTimeout

  一定時間後に処理を行います。ここで、次の画像に切り替わるまでの時間を指定します。
window.setTimeout(“呼び出す関数”, “待機時間”)
引数に指定した「待機時間」だけ経過した後に「呼び出す関数」を呼び出します。ここでは、自分自身(start())を呼び出します。なお、待機時間はミリ秒単位で指定します。

onloadイベント

  ページ読み込み時に「start()関数」を実行するため、javascriptのonloadイベントを使用します。
window.onload = function() {・・・
※BODY要素にonload属性を追加する方法でもOK。

imgタグ

  画像を表示します。変更先ですので、id名を「"gazo"」にします。


トラックバック用のURL
プロフィール

名前:イワサキ ユウタ 職業:システムエンジニア、ウェブマスター 誕生:1986年生まれ 出身:静岡県 特技:ウッドベース 略歴 2008年04月 金融機関系I

最近の投稿
人気記事
カテゴリー
広告