document.getElementsByClassName()

element.classList.add()

element.classList.remove()

関数(JavaScript)

```javascript
function triple(num){
  console.log($(1) * 3);
}
triple($(2)) //実装結果 30
```

if文

配列操作/length

setTimeout/clearTimeout

インクリメント演算子

// 問題1. 次の画像に切り替える処理を関数`*changeSlide*`内にJavaScriptで書いてください
let slideIndex = 0
function changeSlide() {
  let slides = document.getElementsByClassName('slide')
  
  slides[slideIndex].classList.remove('active')
  
  slideIndex++
  
  if (slideIndex > slides.length - 1) {
    slideIndex = 0
  }
  
  slides[slideIndex].classList.add('active')
  setTimeout(changeSlide, 2000)
}
changeSlide()
// 問題2. 関数`*changeSlide*`を2秒ごとに繰り返し実行させてください


.slideshow-container {
  width: 700px;
  margin: auto;
}
img {
  width: 100%;
}

.slide {
  display: none;
}
.slide.active {
  display: block;
}


// 問題1. 次の画像に切り替える処理を関数`*changeSlide*`内にJavaScriptで書いてください
function changeSlide() {
  let slides = 
}
changeSlide()
// 問題2. 関数`*changeSlide*`を2秒ごとに繰り返し実行させてください


画像を2秒ごとに切り替える関数の実装

<img>

<img>要素で使われる属性は多く存在していますが、その中でも$(1)属性は必須となっており、この属性では埋め込みたい画像へのパスを設定します。
また、$(2)属性は必須ではありませんが、アクセシビリティのために非常に有用で、スクリーンリーダーがこの属性に示された説明を読み上げることで、画像が何を表しているかをユーザーに伝えることができます。

<div>

スライドを表示するHTMLの実装

width

margin

margin: 10px 20px 30px 40px;

上記のような場合、余白は上が$(1)px、下が$(2)px、左が$(3)px、右が$(4)pxとなる。

display: block

display: none

特定の画像を表示するスタイルの追加

<button>

idセレクタ

height

ボタンでスライドショーを停止・再開するHTMLの実装

document.addEventListener()

document.getElementById()

ボタンでスライドショーを停止・再開する機能の実装

このレッスンでは、HTMLとCSSを活用してスライドショーの基盤を構築、自動で切り替わるスライドショー機能を実装し、さらにボタンを使ったスライドショーの制御方法を学びます。
効果的なビジュアルプレゼンテーションの技術を習得できます。

webサイトに動きをつけたり、表示内容を切り替えたり、formの入力を制御するなど様々な処理について学んでいきます

JavaScript DOM操作コース

【実践🔥】DOM操作でUIアニメーションを実装しよう

「スライドショーを作ろう」レッスンの総復習クイズです。