JavaScript + jQueryで作るスライドショー

画像部分のHTMLコーディング

全334コースを10日間無料で

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
スライドショーを製作するにあたっての画像部分のHTMLコーディングの方法について解説致します。
講師:
03:19

字幕

このレッスンでは JavaScript と jQuery を使ってスライドショーを実装するにあたり まずはローテーションする画像部分の HTML の コーディング方法について解説します ダウンロードしてきたこちらの フォルダーの中に入っている― こちらの index.html と javascript.js そして stylesheet.css こちらをエディターで開いてください これがそれらのファイルを開いた状態です これらのファイルを使って 今回のレッスンを進めて行きます 早速レッスンを始めましょう まずこれらのファイルの現状について 確認したいと思います この index.html こちらには今回説明する スライドショーの画像部分の― コーディングが完了している状態と なっています そして他の javascript.js と stylesheet.css に関しては― このようにまだ何も記述がない状態です 今回はこの index.html で今回説明する― こちらのスライドショーの 画像部分のコーディングについて その制作のポイントを確認しましょう スライドショーを制作するからと言って その画像部分をコーディングする際に 特に難しく考える必要はありません シンプルに HTML タグで通常通りに 組んでいけば大丈夫です 今回はまずスライドショー本体の大枠の部分を このように div で囲って id に slideshow と入れています この大枠の中に今度はローテーションする 部分―画像の部分ですね― この部分を ul タグでリストで作っています ここには id を slideBox という風に つけています そしてその中にローテーションさせる これらの画像 今回は5つですので li タグも5つ作っています こちら img の src 属性に指定した こちらの画像ファイルですが こちらもダウンロードしてきたファイルの中の― こちらの images という中に 含まれていますので 合わせて確認しておいて下さい そして こちらの各 li タグの中には 画像タグに a タグをつけて リンク設定をしています 今は空っぽにしていますが もしスライドショーをご自身で作る際に そのスライドするバナーをクリックしたときに 他のページに飛ばしたいという時があれば こちらの a タグの href 属性の中に そのリンクを書くと良いでしょう 以上でレッスンは終了です スライドショーの画像部分の HTML の コーディング方法について解説しました 以降のレッスンではスライドショーの 今回作ったこちらの画像を ローテーションさせる為の左右の移動ボタン こちらの HTML コーディングの 方法について解説していきますので そちらも合わせてご覧下さい

JavaScript + jQueryで作るスライドショー

このコースでは、JavaScriptとjQueryを使ってスライドショーを作成する方法について学習します。具体的には、手動切り替えボタンが付いた画像のスライドショーをJavaScriptとjQueryを利用して実装する方法について解説します。同時にHTMLとCSSでのコーディングの仕方やJavaScriptやjQueryの基本についても学ぶことができます。

1時間18分 (15 ビデオ)
現在、カスタマーレビューはありません…
 
ソフトウェア・トピック
価格: 1,990
発売日:2014年09月28日

このコースは、「オンデマンド」でご利用可能であり、ダウンロードすることもオンラインで見ることもできます。

ダウンロードすると、オフラインでコースを使用し、豊富なインターフェースをフルに活用できます。複数のデバイスを使用したり、 一度に全コースをダウンロードしたくない場合は、アカントにログインして、ストリーミング・ビデオとしてコースのレッスンを視聴してください。

ビデオトレーニングをお楽しみいただけますように! お問い合わせは、cs-jp@lynda.com宛までご連絡ください。