画像のスライドショー

ボタンクリックで画像切り替え

  1. HOME
  2. スライドショー

見たい画像を選択してみて

HTMLのソースコード

<div class="slide">
  <div class="image_box">
    <img id="main_image" src="images/j1.jpg">
  </div>
  <div class="toolbar">
    <div class="nav">
      <div id="prev"><</div>
      <span id="page"></span>
      <div id="next">></div>
    </div>
  </div>
</div>

CSSのソースコード

.slide {
  margin: 0 auto;
  border: 1px solid black;
  width: 100%;
  background-color: black;
}

img {
  max-width: 100%;
}

.toolbar {
  overflow: hidden;
  text-align: center;
}

.nav {
  display: inline-block;
}

#prev {
  float: left;
  margin:8px 50px 0 0;
  width: 100px;
  color: #fff;
  font-weight: bold;
}

#next {
  float: right;
  margin: 8px 0 0 50px;
  width: 100px;
  color: #fff;
  font-weight: bold;
}

#prev:hover {
  background-color: #f8f0e3;
  color: #1201fd;
  text-decoration: underline;
}

#next:hover {
  background-color: #f8f0e3;
  color: #1201fd;
  text-decoration: underline;
}

#page {
  display: inline-block;
  float: left;
  margin-top: 8px;
  height: 32px;
  color: #fff;
}

JavaScriptのソースコードと概要

var images = ["images/j1.jpg", "images/j2.jpg", "images/j3.jpg"];
var current = 0;
var pageNum = function () {
  document.getElementById("page").textContent = (current + 1) + "/" + images.length;
}
var changeImage = function (num) {
  if (current + num >= 0 && current + num < images.length) {
    current += num;
    document.getElementById("main_image").src = images[current];
    pageNum();
  }
};

var preloadImage = function(path) {
  var imgTag = document.createElement("img");
  imgTag.src = path;
}

for (var i = 0; i < images.length; i++) {
  preloadImage(images[i]);
}

pageNum();

document.getElementById("prev").onclick = function () {
  changeImage(-1);
};
document.getElementById("next").onclick = function () {
  changeImage(1);
};

スライドショーに必要な変数

var images = ["images/j1.jpg", "images/j2.jpg", "images/j3.jpg"];
var current = 0;
配列imagesを作成し、大きな画像のパスを登録する。
次に変数currentを定義し、0を代入!いま何枚目の画像を表示しているかを保存するために使う

changeImageファンクション

prev,nextがクリックされたら-1か1をパラメーターとして渡し、パラメーター(num)に代入する。

if (current + num >= 0 && current + num < images.length) {
current + num が0以上かつ current + num が配列の項目数より少ない場合はtrueになる。
(配列imagesのインデックス番号内に収まるときだけ!)

current += num;
変数currentにnumを足して、その結果をcurrentに再代入してます。

document.getElementById("main_image").src = images[current];
HTMLの「id="main_image"」を取得して、そのscr属性に配列imagesのcurrent番目のパスを設定している。
scr属性の値を書き換えれば、表示される画像が切り変わる!

pageNumファンクション

document.getElementById("page").textContent = (current + 1) + "/" + images.length;
"page"idを取得して、=右側をテキストコンテンツに値を設定する。
currentは配列のインデックス番号なので、0~2が入っており、1~3と自然にする為 +1 しています。

プリロード

画像読み込みの待ち時間を少なくするために、先に読み込んでおく『プリロード』というテクニックがあります。

配列magesの項目数分、繰り返しpreloadImageファンクションを呼び出します。

var imgTag = document.createElement("img");
imgTag.src = path;
createElementは()内のタグを生成し、メモリに保存するメソッドです。

imgタグを変数imgTagに代入します。
代入された変数imgTagのタグsrc属性に、配列imagesに登録された画像のパスを指定しています。

すると、メモリ内にまだダウンロードしていない画像を指定するimgタグがある事になります。

ここでブラウザがまだ読み込んでいないファイルをダウンロードしキャッシュします。

プリロードは、大きいデータを扱う際によく使われる方法です。