【旧版】jQueryで作るスライドショー
(全8回)
最新版のレッスンはこちらから »
【最新版】JavaScriptでスライドショーを作ろう (全14回)
jQueryを使って簡単なスライドショーを作ってみます。基本的なナビゲーションの他、自動再生機能も実装していきます。
このレッスンでは jQuery 1.10.2 を使用しています。
-
#01 スライドショーを作ってみよう (03:01) 無料公開中
- デモ
- 必要となる知識
- 必要となるツール
- ひな形ファイルの作成
-
#02 縮小画像を表示してみよう (02:38) 無料公開中
- 縮小画像の表示
- .thumbnailの設定
-
#03 clickイベントを設定しよう (02:50)
- スタイルの設定
- clickイベントの設定
- 動作確認
-
#04 ｢前へ｣ボタンを実装しよう (02:40)
- currentNumの宣言
- ボタンの設置
- #prevにクリックイベントを設定
-
#05 ｢次へ｣ボタンを実装しよう (02:28)
- #nextにクリックイベントを設定
- .thumnailのクリックイベントを修正
-
#06 縮小画像の強調表示をしよう (03:00)
- スタイルの設定
- .currentの適用
- カーソルのスタイル設定
-
#07 自動再生機能を作ろう (03:01)
- ボタンの設置
- #playにクリックイベントを設定
- #stopにクリックイベントを設定
-
#08 タイマーの重複起動を防ごう (01:43)
- nowPlayingの設定
- 再生、停止処理の修正
