jQueryでレスポンシブ対応のサムネイル付きクロスフェードスライドショーを作る方法｜BLACKFLAG
以前からjQueryを使ってのシンプルなスライドショーをいくつか紹介していますが やはり今後はサイト上に設置するスライドショー関連も レスポンシブに対応している必要が出てくることは必至なので 試しに作ってみたのを紹介してみます。 今回のレスポンシブ動作はブラウザ枠を目いっぱいにするタイプなので まずは別枠表示で動作サンプルから。。 「jQueryでレスポンシブ対応のサムネイル付きクロスフェードスライドショーを作る方法」サンプルを別枠で表示 サンプルでは6枚の画像を自動でクロスフェードで切り替え、 下に並べてあるサムネイルをクリックすることでも メインビジュアル部分を切り替えることができる形になっています。 （左右のNEXT／BACK透過ボタンで画像を切り替えることも可。） サンプルでは最大幅を「800px」最小幅を「320px」として ブラウザ幅によってスライドショー部分が拡大縮小します。
jQueryで画像がクロスフェードするシンプルな画像ビューアー（自動再生）を作成する方法｜BLACKFLAG
サイトのトップページなどでキ―ビジュアルにあたる部分を、複数枚ある画像を単純なフェードで切り替えるような動作を組み込むことはよくあること。 そんなちょっとした画像の切り替えが必要な際に使える、凝った動きも無く、画像がひたすらクロスフェードし続けるシンプル画像ビューアーのサンプルを作ったので紹介してみます。 まずは動作のサンプルから。 jQuery CROSS FADE IMAGE VIEWER【SAMPLE】 サンプルでは4枚の画像を切り替えています。 自動で再生され、4枚の画像が永遠にループし続けます。 全体構成についてHTMLから。 ◆HTML <div id="viewer"> <img src="img/photo01.jpg" width="400" height="300" alt="" /> <img src="img/photo02.jpg" width="400" hei
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
