Skip to main content

スライドショー ①

目標#

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

サンプルコード#

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

<div class="intro">    <img src="https://i.ibb.co/YdKJgp3/y0726.png" alt="fruits" border="0" 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 = [    "https://i.ibb.co/qmh0t78/cherry.png",    "https://i.ibb.co/XpX2ykx/orange.png",    "https://i.ibb.co/gDNwgt9/apple.pn",]
// まずは配列の考え方からfunction slide_time() {    // numには0から3がランダムに入る    let num = Math.floor(Math.random() * newImgList.length)    // 要素を取得    const slideImg = document.getElementById("slide-show")    // 要素に対して、実行(今回は、属性を付与)    slideImg.setAttribute("src", newImgList[num])}// 関数を呼び出すsetInterval(slide_time, 3000)

チャレンジ#

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

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

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></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")
let timerID
function startSlide() {    console.log("start")    timerID = setInterval(slide_time, 2000)}function stopSlide() {    console.log("stop")    clearInterval(timerID)}

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

--------- 解答例 -------------

  1. script.jsの変更点は以下の通り
const week = ["日", "月", "火", "水", "木", "金", "土"]const today = new Date()// (TRY!) yearには、「年」を取得して代入しようlet year = today.getYear()// (TRY!) monthには、「月」を取得して代入しようlet month = today.getMonth() + 1
//あとは省略
  1. index.htmlの変更点は以下の通り
<div class="intro">    <!-- ↓ このコードはすでに書いたので今回は不要-->    <!-- <img src="../../imgs/fruits.png" id="slide-show" /> -->    <!-- ボタンを追加 -->    <div class="btn-area">        <a class="btn" id="start-btn" onclick="startSlide()">start</a>        <a class="btn" id="stop-btn" onclick="stopSlide()">stop</a>    </div></div>

--------------------------------