ドットインストール - 3分動画でマスターできるプログラミング学習サービス
レッスン一覧
プレミアム会員
法人でのご利用
レッスン一覧
プレミアム会員
法人でのご利用
ログイン
運営からのお知らせ
2023/05/25
NEW
週刊ドットインストール(2023/05/25号)を更新しました!
2023/05/24
NEW
ポートフォリオ掲載可能!実案件をイメージした新クラス、『Webアプリ案件修行 ダミーデータジェネレータ編』をリリースしました
PREMIUM
【旧版】JavaScriptでスライドショーを作ろう
JavaScriptを使ってスライドショーを作ります。基本的なナビゲーションの他、自動再生機能も実装していきます。
0%
新しいレッスンがあります
旧版のレッスンは更新を終了しており、現状と異なる場合があります。サポートも終了しておりますので、最新版への移行をお願いします。
PREMIUM
JavaScriptでスライドショーを作ろう
シンプルなスライドショーを作りながら、JavaScriptの実践的な書き方について学んでいきます。
0%
動画レッスン一覧
(18)
未完了
#01 スライドショーを作ってみよう
(02:42)
無料公開中
概要
完成版の確認
必要となる知識
対応ブラウザ
作業用フォルダの説明
未完了
#02 おおまかにマークアップしよう
(02:25)
無料公開中
index.html
未完了
#03 サムネイルを横並びにしよう
(02:44)
無料公開中
styles.cssの作成
未完了
#04 マウスに反応させよう
(02:13)
無料公開中
スタイルの設定
未完了
#05 FontAwesomeを導入しよう
(02:53)
FontAwesomeの導入
未完了
#06 前へ、次へボタンを作ろう
(02:21)
ボタンの配置
未完了
#07 再生ボタンを作ろう
(02:58)
再生ボタンのマークアップ
未完了
#08 main.jsを作っていこう
(02:23)
main.jsの作成
画像ファイルの配列
未完了
#09 前へ、次へボタンを動作させよう
(02:59)
イベントの設定
未完了
#10 メインの画像を切り替えよう
(02:37)
画像の表示
未完了
#11 画像リストを生成しよう
(02:58)
画像リストの生成
未完了
#12 liにクリックイベントを設定しよう
(01:57)
クリックイベントの設定
未完了
#13 currentクラスを移動させよう
(02:39)
クラスの付け替え
未完了
#14 currentNumを更新しよう
(02:35)
currentNumの更新
カスタムデータ属性の利用
未完了
#15 自動再生機能を実装しよう
(02:31)
自動再生機能の実装
未完了
#16 一時停止ボタンを実装していこう
(02:27)
一時停止ボタンのマークアップ
clearTimeout()
未完了
#17 ボタンの表示/非表示を切り替えよう
(02:02)
ボタンの表示/非表示
未完了
#18 リファクタリングをしよう
(02:51)
リファクタリング
ギャラリー
このレッスンについて
最終更新日
2017年2月8日
バージョン情報
HTML5 / CSS / CSS3 / JavaScript
関連キーワード
(6)
基礎講座
(368)
初心者向け
(367)
HTML
(115)
CSS
(116)
JavaScript
(6)
ミニプログラム
(142)
このレッスンを共有する