WEB-LABO【jQueryプラグイン】設置が簡単でシンプルなスライドショー2014/01/25jQueryツイート前回、「自分で作るjQueryスライドショー中級編」という記事を書きましたが、その方法で作成したプラグインです。フェードイン・フェードアウトで画像が切り替わり、戻るボタンも進むボタンもないシンプルなスライドショーです。slide_simplefade.jsの動作デモ画像の追加や表示秒数、フェードの時間などが指定可能です。(2014/01/24)slide_simplefadeの動作イメージ上の動作サンプルは、画像4枚構成です。4枚目の次は1枚目に戻り、これを延々と繰り返します。imgタグには、「img1」から連番でクラス名を記述します。※番号が飛ばないように注意してください。class=”img4′′>画像を追加した場合の動作イメージ画像を追加した場合の動作イメージです。途中に追加することや順番を入れ替えることも可能です。class=”img5“>準備項目jQueryの本体をダウンロードして読み込みます。プラグイン用の「slide_simplefade.js」と「slide_simplefade.css」をhead要素内で読み込みます。ファイルの設置場所によりパスは適宜変更してください。同じフォルダ内に設置する場合は、このままで構いません。href="slide_simplefade.css">※サンプルも含めたslide_simplefade一式のダウンロードはこちら。※jQueryの本体は、ダウンロードしたファイル名に変更してください。HTMLを記述する場合の注意点コンテナ要素に「#slide」とid名を付けてください。要素はpでもdivでも構いませんが、コンテナ要素の中に直接imgを記述してください。imgタグには必ずclass名を付けます。クラス名は「img+連番」の形式とし、必ず1から開始して連番になるように記述します。画像を順番を入れ替えた場合は、連番を振り直してください。変数に値を代入することで設定します。interval画像の表示時間です。数値を小さくすると短く、大きくすると長くなります。1000=1秒なので、7000で7秒間の表示になります。fadeTime画像切り替え時、フェードイン・フェードアウトの時間です。数値を小さくすると素早く切り替わり、大きくするとゆっくり切り替わります。表示時間と同様に1000=1秒です。imgNoどの画像から開始するか、画像番号を指定します。img1から開始したい場合は1、img3から開始したい場合は3となります。maxNoスライドの最後の画像番号を代入します。画像が4枚でimg4が最後であれば4を代入。画像が5枚でimg5が最後であれば5を代入します。※自動取得にしたので、ver1.1から不要になりました。自分で作るjQueryスライドショー中級編プラグインに頼らず自力でjQueryのスライドショーを作る方法JavaScriptのsetInterval()でアニメーションの初歩JavaScriptのsetInterval()を使い、一定間隔で処理を繰り返す。関わらず自由にお使いいただけます。ご使用に際して発生した損害などにつきましては一切責任を負いかねますのでご了承ください。自己責任でお願いします。oonishi熊本電子ビジネス専門学校のITビジネス科で、Webをメインに教えています。「Webデザイナーである前に、ビジネスパーソンであれ」がモットーです。「今」の積み重ねによる未来を待つのではなく、未来から逆算して「今」を生きる。PHPフィードRSSAtom。