今回はドットインストールのJavaScript講座で紹介されているスライドショーをVue.jsで作ってみました！
本家はこちら
３択クイズとかストップウォッチとかも作ってみたけど、結構同じような処理をするので、ちょっとずつ何も見ないでも作れる部分が増えてきました！
こうやって学習の成果を感じられると勉強って続けやすいですよね^^
ドットインストールの題材はそんなに難しくないし、ググれば似たようなアプリを作っている人とかもいて勉強進めやすいのでおすすめです！
コードの解説は、、、特にないですね笑
参考にしてください！
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SlideShow</title>
<style>
main{
width:300px;
margin:0 atuo;
}
img{
vertical-align: bottom;
}
ul{
list-style: none;
padding:0;
margin:0;
}
.main{
width:300px;
height:200px;
margin-bottom: 8px;
}
nav{
margin-bottom: 8px;
}
nav ul{
display:flex;
justify-content: space-between;
}
nav li{
border:1px solid #ddd;
border-radius: 4px;
font-size: 12px;
padding:4px;
text-align: center ;
cursor:pointer;
user-select: none;
}
nav li:hover{
background: #f8f8f8;
}
.play{
width:140px;
}
.prev,
.next{
width:60px;
}
.thumbnails{
display:grid;
grid-template-columns: repeat(5, 56px);
gap:5px;
}
.thumbnails li{
cursor: pointer;
opacity: 0.4;
}
.thumbnails li:hover,
.thumbnails li.current{
opacity:1;
}
.thumbnails img{
width:56px;
}
</style>
</head>
<body>
<main id = "app">
<img v-bind:src = images[currentIndex] class = "main">
<nav>
<ul>
<li class="play" v-on:click="play()">{{ status }}</li>
<li class="prev" v-on:click="prev()"><</li>
<li class="next" v-on:click="next()">></li>
</ul>
</nav>
<ul class="thumbnails">
<li v-for="(img,index) in images" v-bind:class={current:currentIndex===index}>
<img :src = img v-on:click="select(index)">
</li>
</ul>
</main>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
new Vue({
el:'#app',
data(){
return{
images: [
'img/pic00.png',
'img/pic01.png',
'img/pic02.png',
'img/pic03.png',
'img/pic04.png',
'img/pic05.png',
'img/pic06.png',
'img/pic07.png',
],
currentIndex:0,
timeoutId:'',
status:'Play',
isPlaying:false,
}
},
methods:{
next(){
if (this.currentIndex === this.images.length - 1) {
this.currentIndex = 0;
} else {
this.currentIndex++;
}
},
prev(){
if(this.currentIndex <= 0){
this.currentIndex = this.images.length-1;
}else{
this.currentIndex--;
}
},
playSlideshow(){
this.timeoutId = setTimeout(() => {
if (this.currentIndex === this.images.length - 1) {
this.currentIndex = 0;
} else {
this.currentIndex++;
}
this.playSlideshow();
}, 1000);
},
play(){
if(this.isPlaying){
clearTimeout(this.timeoutId);
this.isPlaying=false;
this.status = 'Play';
}else{
this.playSlideshow();
this.isPlaying=true;
this.status = 'Pause';
}
},
select:function(index){
this.currentIndex=index;
}
}
});
</script>
</body>
</html>
