見たい画像を選択してみて
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を作成し、大きな画像のパスを登録する。var current = 0;
次に変数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は()内のタグを生成し、メモリに保存するメソッドです。imgTag.src = path;
imgタグを変数imgTagに代入します。
代入された変数imgTagのタグsrc属性に、配列imagesに登録された画像のパスを指定しています。
すると、メモリ内にまだダウンロードしていない画像を指定するimgタグがある事になります。
ここでブラウザがまだ読み込んでいないファイルをダウンロードしキャッシュします。
プリロードは、大きいデータを扱う際によく使われる方法です。