スライドショー ①

目標#

いくつかの画像が順番に表示されるスライドショーを作ろう

サンプルコード#

1.HTMLのコードを、Glitchの index.html に追加しよう！#

<div class="intro">    <img src="../../imgs/fruits.png" id="slide-show" /></div>

2.CSSのコードを、Glitchの style.css に追加しよう！#

.intro {    text-align: center;    font-weight: bold;}
.intro img {    display: block;    margin: 0 auto 10px;    width: 300px;    height: 300px;}

3.JavaScriptのコードを、Glitchの script.js に追加しよう！#

const newImgList = [    "../../imgs/apple.png",    "../../imgs/orange.png",    "../../imgs/cherry.png",]
// まずは配列の考え方からfunction slide_time() {    // numにはおなじ0から3がランダムに入る    // 3 = (参加者が埋める:new_img_listの長さ) TRY    let num = Math.floor(Math.random() * newImgList.length)    // 要素を取得    const slideImg = document.getElementById("slide-show")    // 要素に対して、実行(今回は、属性を付与)    slideImg.setAttribute("src", newImgList[num])}// 関数を呼び出す (TRY: ここも多分新しい感覚)setInterval(slide_time, 3000)

4.(TRY!) と書いてある箇所を書き換えて、コードを完成させよう！#

ヒント#

分岐を使います！

チャレンジ#

ボタンを使って、スライドショーを止めたり動かしたりできるようにしよう！

今作ったスライドショーは、止まらずにずっと動いています。もしじっくり見たい画像があるとき、スライドショーを止めるストップボタンがあると嬉しいですね！そういう動きをするボタンを作ってみましょう！

1.HTMLのコードを、Glitchの index.html に追加しよう！#

上で書いたコードのうち、divタグの中で imgタグの下に以下の4行を追加しよう。

<div class="intro">    <!-- ↓ このコードはすでに書いたので今回は不要-->    <!-- <img src="../../imgs/fruits.png" id="slide-show" /> -->    <!-- ボタンを追加 -->    <div class="btn-area">        <a class="btn" id="start-btn">start</a>        <a class="btn" id="stop-btn">stop</a>    </div>    <!-- 分岐: 1つのボタンで2つの役割のボタン -->    <!-- <a class="btn" id="start-stop-btn">start</a> --></div>

2.CSSのコードを、Glitchの style.css に追加しよう！#

.btn {    display: inline-block;    width: 80px;    line-height: 50px;    cursor: pointer;    background-color: antiquewhite;    margin: 10px;}
.btn-area{    display: flex;    justify-content: center;}

3.JavaScriptのコードを、Glitchの script.js に追加しよう！#

// ボタンの情報を取得: TRYconst startBtn = document.getElementById("start-btn")const stopBtn = document.getElementById("stop-btn")// const startStop = document.getElementById("start-stop-btn")let timerID
function startSlide() {    console.log("start")    timerID = setInterval(slide_time, 2000)}function stopSlide() {    console.log("stop")    clearInterval(timerID)}
// TRY onclickをボタンにつけるstartBtn.onclick = startSlidestopBtn.onclick = stopSlide