JavaScript: スライドショーの作り方
JavaScriptでスライドショーを作ってみました。
画像下に表示されている「<< 前」「次 >>」をクリックすると画像が切り替わります。
サンプルコードも掲載していますのでご自由にアレンジして使ってください。
動作サンプル
htmlファイル
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>スライドショー</title>
<script type="text/javascript" src="sample02.js"></script>
<style>
#slide {
width: 210px;
height: 300px;
}
#up {
border: solid 1px silver;
}
#down {
padding-top: 5px;
text-align: center;
}
#pre, #next {
cursor: pointer; /* マウスカーソルをポインタにする */
font-weight: bold;
text-decoration: underline; /* 下線 */
}
#number {
font-weight: bold;
margin-left: 10px;
margin-right: 10px;
}
</style>
</head>
<body>
<div id="slide">
<div id="up">
<img id="main_image" src="img/image0.png">
</div>
<div id="down">
<span id="pre"><< 前</span>
<span id="number">1 / 5</span>
<span id="next">次 >></span>
</div>
</div>
</body>
</html>
JavaScriptファイル
// 画像用配列
var images = [
'img/image0.png',
'img/image1.png',
'img/image2.png',
'img/image3.png',
'img/image4.png'
];
// 現在の画像番号
var imgNumber = 0;
window.onload = function() {
var i = 0;
for (i = 0; i < images.length; i++){
// 画像プリロード
getImage(images[i]);
}
// 前 のイベントリスナー
var pre = document.getElementById('pre');
pre.addEventListener("click", function() {
changeImage(-1);
}, false);
// 次 のイベントリスナー
var next = document.getElementById('next');
next.addEventListener("click", function() {
changeImage(1);
}, false);
}
// 画像プリロード用関数
function getImage(file){
var img = document.createElement('img');
img.src = file;
}
// 画像変更
function changeImage(para){
// 次への場合
if (para == 1){
imgNumber ++;
if (imgNumber >= images.length){
// 最初に戻る
imgNumber = 0;
}
// 前への場合
}else{
imgNumber --;
if (imgNumber < 0){
// 最後に戻る
imgNumber = images.length - 1;
}
}
// 画像変更
var img = document.getElementById('main_image');
img.src = images[imgNumber];
// 画像番号情報変更
var num = imgNumber + 1;
var str = num + ' / ' + images.length;
var n = document.getElementById('number');
n.innerHTML = str;
}