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

皆さん、ついに、エアラインでも、サブスクリプションが始まったのはご存じですか? まだ実験段階ですが、ANAが、定額全国住み放題サービスを提供する「ADDress」と組んで、国内線を4回まで定額利用可能 ...

2

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

3

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

4

ついに、noteの月間アクティブユーザー数が4400万人(2020年3月時点)に到達しました。 そもそも、「note」とは、クリエイターが、文章やマンガ、写真、音声を投稿することができ、ユーザーはその ...

5

ボードゲームカフェが1日2回転で儲かるという記事をみつけたので興味を持ち、調べてみました。 まずは、需要がどれくらいあるのか、市場のようすからみていきましょう。 世界最大のボードゲーム市場はドイツで、 ...

-Blockchain, code, Metaverse, VR
-, ,

Copyright© BUSINESS HUNTER , 2023 All Rights Reserved Powered by AFFINGER5.