前提
vue-cliでのプロジェクト作成
現在スライドバナーを作成しています。
最終的に画像自動スライドと戻ると次へのボタン設置を実装しようと思っております。
現在のソースがこちらです
html
1<!DOCTYPE html> 2<html> 3<head> 4<script type="text/javascript" src="https://vuejs.org/js/vue.js"></script> 5<style type="text/css"> 6.slide-enter-active, .slide-leave-active { 7 transition: transform .5s 8} 9.slide-enter { 10 transform: translateX(300px) 11} 12.slide-leave-active { 13 transform: translateX(-300px); 14} 15 16p { 17 position: absolute; 18 margin: 0; 19 font-size: 3em; 20} 21</style> 22</head> 23 24<body> 25 <div id="app"> 26 <button @click="product++">次</button> 27 <transition name="slide"> 28 <p :key="products[product%5]">{{products[product%5]}}</p> 29 </transition> 30</div> 31 <script> 32new Vue({ 33 el: '#app', 34 data: { 35 product: 0, 36 products: ['画像1','画像2','画像3','画像4','画像5'] 37 } 38}) 39</script> 40</body> 41</html>
進むとアニメーションが実装されています、ここから戻ると自動スライド方法が思いつかず困っております、ご教授お願いいたします。
他に試したものがこちらです。
自動化
html
1<!-- ここにHTMLを書きます --> 2<!-- Vue.jsの読み込み --> 3<script src="https://unpkg.com/vue/dist/vue.js"></script> 4 5<!-- ここから --> 6<div class="showbox"> 7 <!-- ▼スライドショーを表示する場所 --> 8 <p> 9 <img src="slideshow.jpg" id="slideshow" alt="スライドショー表示領域"> 10 </p> 11 <!-- ▼スライドショーの制御ボタンを表示 --> 12 <p> 13 <input type="button" value="- 開始/停止 -" id="startstopbutton"> 14 </p> 15</div>
js
1 2// ---------------------------------------------- 3// ▼設定:スライドショーで見せたい画像ファイル群 4// ---------------------------------------------- 5var imgset = [ 6 "sky.jpg" , 7 "snowwoods.jpg" , 8 "water.jpg" , 9 "beachsky.jpg" , 10 "greenplain.jpg" , 11 "seashipsky.jpg" /* 最後にカンマは不要 */ 12]; 13 14// ----------------------------------------------- 15// ▼関数A:指定画像を順に表示させる 16// ----------------------------------------------- 17var counter = 0; 18function slideimage() { 19 if( counter >= imgset.length ) { 20 // カウンタが画像数よりも大きくなったら0番に戻す 21 counter = 0; 22 } 23 // 対象要素の画像URLを次の画像のURLに切り替える 24 document.getElementById('slideshow').src = imgset[counter]; 25 // カウンタを1増やす 26 counter++; 27} 28 29// ----------------------------------------------- 30// ▼関数B:スライドショーを制御 31// ----------------------------------------------- 32var slideid = 0; 33function startstopshow() { 34 if( slideid == 0 ) { 35 // 始まっていなければ始める 36 slideid = setInterval(slideimage,500); // 1000は切替秒数(ミリ秒) 37 } 38 else { 39 // IDがあれば止める 40 clearInterval(slideid); 41 slideid = 0; 42 } 43} 44 45// ▼ボタンクリックに関数を割り当てる 46 47document.getElementById('startstopbutton').onclick = startstopshow;
css
1.showbox { 2 display: inline-block; 3} 4.showbox p { 5 text-align: center; 6} 7.showbox img { 8 border: 2px solid skyblue; 9}
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/01/29 13:36
2018/01/30 01:26
2018/01/30 02:01