投稿日：2014年9月8日｜最終更新日: 2014年12月11日

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

JavaScript 制作

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

完成イメージ

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

ソースコード

<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()）を呼び出します。なお、待機時間はミリ秒単位で指定します。