はじめに
こんにちは！最近週末は温泉に通っている@70days_jsです！
今日はスライダーを自作しました。hover時に画像をうっすら白くするところ以外は、何も参考にせず0から作ってみました。
扱う技術レベルは低いですが、同じように悩んでる初心者の方を勇気付けられれば幸いです。
今日は28日目。(2019/11/15)
よろしくお願いします。
サイトURL
やったこと
スライダーを作ってみました。
矢印ボタンか、サムネイルをクリックすれば画像が変わります。
まずはgifでどうぞ↓
やったことはだいたいこんな感じです。↓
- 矢印ボタンのクリックで画像を変更する
- サムネイルを表示する
- サムネイルのクリックで画像を変更する
- 画像hover時に色を変更する
では1から順に書いていきます。
1. 矢印ボタンのクリックで画像を変更する
矢印はfont awesomeを使いました。
htmlはこんな感じです。
<div class="slider">
<div id="left"><i class="fas fa-angle-left"></i></div>
<img id="image" src="day24_image/photo1.jpg" alt="slider">
<div id="right"><i class="fas fa-angle-right"></i></div>
</div>
id="left"が左の矢印で、rightが右矢印です。
id="image"の部分で画像を表示しています。
次にjavascriptですが、スライダーに使う画像を配列に入れています。↓
let image = [
'day24_image/photo1.jpg',
'day24_image/photo2.jpg',
'day24_image/photo3.jpg',
'day24_image/photo4.jpg',
'day24_image/photo5.jpg'
];
あとは要素を取得して、イベントリスナーをつけて、配列から表示する画像を選んでいます。↓
let img = document.getElementById('image');
let left = document.getElementById('left');
let right = document.getElementById('right');
let count = 0; //現在表示している画像の配列番号
let imageLength = image.length - 1; //4
left.addEventListener('click', imageLeftClick);
right.addEventListener('click', imageRightClick);
function imageLeftClick() {
if (count === 0) {
count += imageLength;
} else {
count--;
}
let src = img.getAttribute('src');
img.setAttribute('src', image[count]);
}
function imageRightClick() {
if (count === imageLength) {
count = 0;
} else {
count++;
}
let src = img.getAttribute('src');
img.setAttribute('src', image[count]);
}
let count = 0;が画像表示の肝になっており、右矢印を押せば一つ下の数字の配列番号、左クリックなら一つ上の数字の配列番号を表せるようになっています。
もしcountが0なら配列の長さ分を足し、逆にcountの値が配列分の長さに達していたら0を代入することで画像がループするようにしています。
2. サムネイルを表示する
次にサムネイルの表示ですが、これはidがthumbnailの要素を取得して、javascriptでimg要素を作って、配列の画像をすべて入れて、idがthumnailの要素の下に加えるということをやっています。↓
let thumbnail = document.getElementById('thumbnail');
for (var i = 0; i < image.length; i++) {
let imgElement = document.createElement('img');
let src = image[i];
imgElement.setAttribute('src', src);
imgElement.setAttribute('class', "thumbnail");
thumbnail.appendChild(imgElement);
}
途中でclassをセットしていますが、これは画像をリサイズするためのクラスです。
imgElement.setAttribute('class', "thumbnail");
classはあらかじめcssの方で書いておきます。↓
.thumbnail {
display: inline-block;
width: auto;
height: 90px;
max-width: 100%;
max-height: 100%;
border: .1px solid white;
}
以前やったやつですね。max-width: 100%;とmax-height: 100%;をつけると画像がボックス内にうまく収まってくれます。今回はheightの値は指定して、widthが可変になるようにしています。
3. サムネイルのクリックで画像を変更する
次はサムネイルをクリックすると、画像も変わる部分です。
let thumbnailList = document.getElementsByClassName('thumbnail');
for (var i = 0; i < thumbnailList.length; i++) {
let thumbnail = thumbnailList[i];
thumbnail.addEventListener('click', function displayImage(e) {
let src = e.target.getAttribute('src');
img.setAttribute('src', src);
});
}
さっきサムネイル画像を生成するときにつけておいたclass（画像をリサイズするためのクラス、thumbnailクラス）を利用します。
全てのサムネイルにthumbnailクラスが付いているのでgetElementsByClassNameで一括取得して、そのあとにfor分でそれぞれのサムネイルにイベントリスナーをつけていきます。
引数にeを渡すことでクリックされた要素を特定し、その要素のsrcを取得し、そのsrcをimg変数（画像を表示させる部分)にセットすることでうまく画像を表示してくれます。
4. 画像hover時に色を変更する
最後に、いまいちスライダー感がなかったのでcssで画像にhoverしたらうっすら白くなる演出を加えてみました。とはいえここのやり方は思いつかなかったのでサイトの記事を参考にさせていただきました。
仕組みは簡単で、例えばこのhtml構造なら↓
<div class="slider">
<div id="left"><i class="fas fa-angle-left"></i></div>
<img id="image" src="day24_image/photo1.jpg" alt="slider">
<div id="right"><i class="fas fa-angle-right"></i></div>
</div>
画像を表示させるid="image"の親要素であるclass="slider"の背景を白にします。
.slider {
background-color: white;
}
その後、画像を表示させるid="image"がhover（擬似クラス）されたらopacityというプロパティで透明度を調整できるので、画像の透明度を少し下げます。↓
# image:hover {
opacity: .7;
}
これだけで画像は透明になり背景の白が浮かんでくるので、hoverされたら画像がうっすら白くなったように見えます。
感想
やっとwebサイトっぽいもの（スライダー）を作れました。嬉しいです。ただスライダーを調べているうちにカルーセルというものに出くわしました。違いが全く分かりません・・・。という感じで一歩進んで二歩下がりながら頑張っております。この調子で年末にはきちんとしたwebサイトを作れるようになっていたら嬉しいな・・・。
最後までお読みいただきありがとうございます。明日も投稿しますのでよろしくお願い致します。
参考
- マウスが載ったときだけ画像を半透明にするCSSの書き方 - スタイルシートTipsふぁくとりー (https://www.nishishi.com/css/translucent-image-opacity.html)
hover時の挙動を参考にさせていただきました。ありがとうございます！