jQueryプラグイン活用講座

簡単なスクリプトで自動スライダををつくる

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
簡単なスクリプトで、自動スライダを作ります。
講師:
05:40

字幕

このレッスンでは 画像を切り替えるスライダーのプラグインjSlider を使って簡単なコードで自動スライダーを作ってみたいと思います現在 jquery の 1.8.3これはネットから読み込んでいますcdn ですそしてダウンロードした jSlider のJavaScript ファイル3つをscript 要素で読み込んでありますそれからこの style の設定なんですがこちらは jSlider のdocumentation からそのままコピー&ペーストしてありますそして body 要素の方なんですけれども各画像ですね全部で5つありますけれどもimg 要素を a 要素で囲みそれぞれを div の要素で含めていますそしてその div の要素全体をさらにdiv 要素class=”slider” で囲んでありますそれから こちらは矢印のボタンにするんですけれども矢印の記号(←)が入っていますさてこの スタイルシートについて1個だけ設定の変更があります画像はすべて 640x427 ですところが コピー&ペーストしたものはサイズが違うのでサイズは 実際の画像に合わせてください640 の 427 ですねそしていよいよ jquery のJavaScript コードを書いていきますまず ドキュメントを読み込んだら実行するという初期化の書き方ですね$( で function(){});これはもう お約束の書き方ですそして改行をしますこの中に jSlider の実行を入れるんですが まずはセレクタですねセレクタは先ほど見た通りclass="slider"がありますので これに対してjSlider のメソッドを実行しますclass で slider ですねそして これに対してライブラリのこのメインのjSlider.js ですけれどもこれと全く同じメソッドで実行をしますこれは () の中 何も入れないと実はだめで 設定が必要です2つだけ設定します設定はオブジェクトで行いますsettings としましてオブジェクトなので {} とした後見やすいように改行しましょう2つのプロパティを入れますまず1つはエレメントの意味なんですけれどもelem までですエレメントdiv 要素でスライダーを作ってますねbody 要素の中にですから div と入れますdiv 以外にどんな選択があるかというとリストで作ることもできますその場合には ここが li要素の li ですね になりますもう1つプロパティを加えますので, 区切りで auto.slide自動的に切り替わりますでいいのかどうかですねオートスライドにしていいのかどうかでいい場合は true とします手で切り替えたいという場合には ここをfalse に設定するんですけれどもオートの方がいいでしょうねオートでも手で切り替えることもできますのでその上でこのプロパティを収めたオブジェクト(settings)ですけれどもこれをコピーしてjSlider のメソッドの呼び出し引数として加えますこれで保存して確認しましょうファイルを保存しますそして「ブラウザーでプレビュー」します写真が出ましたこれが自動的に切り替わりますちょっと時間かかりますねそしてもちろんこの← で戻ったり 進んだりそれからこのラジオボタンのようなもので行先を切り替えることもできます最後まで行くと 自動スライドはこれで終了するんですがまた戻れば そこから自動切り替えがまたスタートしますという具合ですねこのレッスンでは 画像を切り替えるスライダーを作るプラグインのjSlider を簡単なコードで設定してみましたまず1つは スタイルシートの幅と高さですねこれを実際の画像に合わせるということその上で jquery のスクリプトを書くんですけれども呼び出しは class を定めておいたらその class をセレクタとしてjSliderそしてこの () の中には2つ設定したオブジェクトを渡しましたsettings ですねelem がどの要素の中に画像があるのかという指定です今回 div ですそれから オートスライドをするのかしないのか今回 true として設定しましたこれだけで自動スライドができてしまいました

jQueryプラグイン活用講座

jQueryは広く利用されているJavaScriptライブラリで、機能を拡張するプラグインも数多く公開されています。このコースではインターフェイスやアニメーションが簡単に作れるiQueryのプラグインを多数紹介します。パーティクルのアニメーションや切り替え効果を加えた写真表示、アニメーションするパーツなど多くの作例を実際にコードを書きながら詳しく説明します。

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

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

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

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