JavaScript勉強もかねて、
jQueryで書いているドットインストールさんのスライドショーを
JavaScriptで書き直してみた。
・要素の取得は、document.getElementByIdやdocument.getElementsByClassNameを使用。
・CSSのクラス名付与・削除は取得した要素.className = 'class名';,
取得した要素.classList.remove('class名')を使用。
・サムネイル画像をクリックしたら、画像が切り替わるようにimgタグ分、クリックイベントを付与するのは、for文を使用。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>スライドショー</title>
<style>
body {
margin: 10px auto;
text-align: center;
}
img {
width: 50%;
}
.thumbnail {
width: 125px;
height: 83px;
opacity: 0.5;
cursor: pointer;
}
.current {
opacity: 1.0
}
.thumbnail + .thumbnail {
margin-left: 4px;
}
</style>
</head>
<body>
<div id="thumbnails"></div>
<div id="main"></div>
<div id="nav">
<button id="prev">« 前へ</button>
<button id="next">次へ»</button>
<button id="play">再生</button>
<button id="stop">停止</button>
</div>
<script>
//変数の定義、ファイルを配列格納
var files = [
'img/photo01.jpg',
'img/photo02.jpg',
'img/photo03.jpg'
];
var img;
var currentNum = 0;
var timer;
var isPlaying = false;
//配列から動的にimageを表示するためのHTMLを作成
for(var i=0; i<files.length; i++){
img = document.createElement('img');
img.src = files[i];
img.className = 'thumbnail';
document.getElementById("thumbnails").appendChild(img);
}
img = document.createElement('img');
img.src = files[0];
var mainImg = document.getElementById('main').appendChild(img);
var imgs = [];
imgs = document.getElementsByClassName('thumbnail');
imgs[0].className = 'thumbnail current';
var n = document.getElementById('main').getElementsByTagName('img')[0];
for(var i=0;i<imgs.length;i++){
imgs[i].onclick = function(){
n.src = this.src;
for(var j=0;j<imgs.length;j++){
imgs[j].classList.remove('current');
}
this.className = 'thumbnail current';
for(var j=0;j<imgs.length;j++){
if(imgs[j].classList[1] == "current"){
currentNum = j;
}
}
};
}
//前へボタンの実装
document.getElementById('prev').onclick = function(){
currentNum--;
if(currentNum < 0){
currentNum = files.length - 1;
}
n.src = files[currentNum];
for(var j=0;j<imgs.length;j++){
imgs[j].classList.remove('current');
}
imgs[currentNum].className = 'thumbnail current';
};
//次へボタン実装
var next = document.getElementById('next');
next.onclick = function(){
currentNum++;
if(currentNum > files.length - 1){
currentNum = 0;
}
n.src = files[currentNum];
for(var j=0;j<imgs.length;j++){
imgs[j].classList.remove('current');
}
imgs[currentNum].className = 'thumbnail current';
};
//一定時間でスライドしていく機能実装
function autoPlay(){
next.onclick();
timer = setTimeout(function(){
autoPlay();
},1000);
}
//再生ボタンでスライドショー動作
document.getElementById('play').onclick = function(){
if(isPlaying)return;
isPlaying = true;
autoPlay();
};
//停止ボタンでスライドショーを止める
document.getElementById('stop').onclick = function(){
clearTimeout(timer);
isPlaying = false;
};
</script>
</body>
</html>