Blockchain code Metaverse VR

Unity×VR×Blockchain(223)

スポンサーリンク

//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の表示には関係なく、ダウンロードされていない画像としてこのパスを認識するので、画像をダウンロードし、一時保存する。これにより、実際の表示のタイミングではダウンロード処理を行わなくてもキャッシュからすぐに取り出すことができる。

人気の記事

1

コロナによる需要変化 コロナパンデミックの影響で、人々は外に出られなくなり、自宅で過ごす時間が増えました。 この自粛ムードの中、下記のようなビジネスの需要変化が引き起こされています。 【利用者減少】 ...

2

米国レストランの決済時に毎日お世話になっていた「Square」のビジネスモデルについて本日はふれていきたいと思います。 「Square」とは、ネットにつながったモバイル端末と専用のカードリーダーを用意 ...

3

無料でネットショップを開けるアプリとして多くの人に驚きを与えたBASE株式会社が、2019年10月25日東証マザーズに上場しました。2020年2月時点で90万店を超えるショップを抱えるまでに成長してい ...

4

2011年にサービスを開始してから圧倒的な成長率を誇るインテリア通販サイト 【FLYMEe/フライミー】を皆さんご存じでしょうか。 「自分のイメージするインテリア、本当に欲しいインテリアがどこにあるの ...

5

ナイキのSNKRSが、なぜこれほどまでに人気なのか?調べてみました。 きっかけは米国での友達との会話。彼は自分のシューズをみせて、「これ20万円もしたんだぜ。」と語ってくれました。 あまり靴に興味がな ...

-Blockchain, code, Metaverse, VR
-, ,

Copyright© BUSINESS HACKER , 2021 All Rights Reserved Powered by AFFINGER5.