//tips
//js理解継続
クリックされた際に画像を切り替える処理を確認する。
画像の切り替えには<img>のsrc情報を書き換えれば良いので、onclickイベント以下の処理内容を変更する。
<script>
‘use strict’
const thumbs = document.querySelectorAll(‘.thumb’);
thumbs.foreach(function(item,index){
item.onclick=function(){
document.getElementById(‘bigimg’).src=this.dataset.image;
}
});
</script>
id属性のbigimgがついた要素を取得し、onclickイベントが発生した<img>タグに含まれるdata-image属性値を代入している。
HTMLは
取得した要素.属性
で属性の値を読み取れ、取得した要素.属性=値とすることで値を書き換えることができる。
次はスライドショーを作成していく。
ボタンがクリックされたら配列に登録されている順に画像を切り替える機能を実装する。
<section>
<div class = “slide”>
<div class=“image_box”>
<img id= “main_image” src=“images/image1.jpg”>
</div>
<div class =“toolbar”>
<div class=“nav”>
<div id=“prev”></div>
<div id=“next”></div>
</div>
</div>
</div>
</section>
main_imgがクリックされると切り替わる画像を表し、toolbarが操作するためのツールバーとなっている。
ボタン部分にはプログラムで操作したい部分にid、cssを適用させたい部分にはclassをつけている。
<style>
.slide{
margin: 0 auto;
border: 1px solid black;
width:720px;
background-color:black;
}
img{
max-width:100%;
}
.toolbar{
overflow:hiden;
text-align:center;
}
.nav{
display:flex;
justify-content:center;
align-items:center;
Padding:16px 0;
}
#prev{
margin-right:0.5rem;
width:16px;
height:16px;
background:url(images/arrow-left.svg) no-repeat;
}
#next{
margin-left:0.5rem
width:16px;
height:16px;
background: url(images/arrow-right.svg) no-repeat;
}
</style>
#prevと#next部分で背景画像を設定していることがわかる。
<script>
‘use strict’
const images=[‘images/image1.jpg’,’images/image2.jpg’,’images/image3.jpg’,’images/image4.jpg’,’images/image5.jpg’];
let current=0;
function changeImage(num){
if(current + num >= 0 && current + num < images.length){
current += num;
document.getElementById(‘main_image’).src=images[current];
}
};
document.getElementById(‘prev’).onclick=function(){
changeImage(-1);
}
document.getElementById(‘next’).onclick=function(){
changeImage(1);
};
</script>
実装内容自体はさほど難しくないのでjsの型を覚えていれば対応できる範囲。
現在何枚目の画像を見ているか表示させたい場合は、
htmlでは
<div id =“page”></div>
Cssでは
#page{
color:white
}
Jsでは
function pageNum(){
document.getElementById(‘page’).textContent=‘${current + 1}/${images.length}’;
}
を追加すると実現できる。
現在はボタンがクリックされた段階で次の画像を逐一読み取る形になっているので、ページが表示された際に最初から全ての画像を読み込ませておきたい場合には、
image.foreach(function(item,index)){
preloadImage(item);
}
function preloadImage(path){
let imgTag=document.currentElement(‘img’);
imgTag.src=path;
}
createElementは()内のタグ名を持つ要素を生成して、メモリに保存するメソッドで、画面に表示されることはない。ここでは生成した要素をimgTagに代入し、そこに配列imagesに格納されたパスを指定している。
ブラウザ側はHTMLの表示には関係なく、ダウンロードされていない画像としてこのパスを認識するので、画像をダウンロードし、一時保存する。これにより、実際の表示のタイミングではダウンロード処理を行わなくてもキャッシュからすぐに取り出すことができる。
