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
JQuery Cycle Plugin
Check out Cycle2, the latest in the Cycle line of slideshows. Overview The jQuery Cycle Plugin is a slideshow plugin that supports many different types of transition effects. It supports pause-on-hover, auto-stop, auto-fit, before/after callbacks, click triggers and much more. It also supports, but does not require, the Easing Plugin. How it Works The plugin provides a method called cycle which is
レスポンシブかつ軽量な画像スライドショーのjQueryプラグイン-ResponsiveSlides.js
Modified 2014-06-08 更新情報 記事公開時とオプションや設定方法など変わっていた点が多数あったため、現在の方法へオプションを書き換えました。 ResponsiveSlides.jsは、レスポンシブで792KBの軽量かつシンプルなスライドショーのjQueryプラグインです。Internet Explorer 6,7,8,9 にも対応していて、サポートしているブラウザも幅広いので、定番として使えそうです。 「サンプル」も作ってみましたが、設置も簡単にできました。シンプルなマークアップで使いやすいです。 デモ ResponsiveSlides.js · Responsive jQuery slideshow Slideshow 1 はシンプルに画像がフェードしながら切り替わります。 Slideshow 2 は画像の切り替えをページナビで行います。 ダウンロード viljamis
数行で書けるオート再生なスライドショー
Result jQurey//id="slideshow"内のdiv要素の最初以外は隠す $("#slideshow > div:gt(0)").hide(); //タイマーで順にフェードアウトとインを繰り返す setInterval(function() { $('#slideshow > div:first').fadeOut(1000).next().fadeIn(1000).end().appendTo('#slideshow'); }, 3000);css#slideshow { margin: 50px auto; position: relative; width: 100px; height: 100px; padding: 5px; box-shadow: 0 0 10px rgba(0,0,0,0.3); } #slideshow > div { position: a
特集記事や新着記事を見栄えよくスライドショーしてくれるWordPressプラグインまとめ
WordPress 3.0がついにリリースされましたね。早速テスト環境に（英語版だけど）インストールしながらいろいろいじってます。 メニューがプラグインなしで作成できる機能や、タクソノミーが改良されたようで、じっくり研究したらレビューなり何なりアップ予定。 ところで、3.0で使えるかまだ試してないけど、コンテンツのスライドショーを作ってくれるプラグインを探しているので、ついでに覚え書き。（3.0で動くと良いな〜、ま、ここ何週間かの間に、大量に3.0対応のプラグインがリリースされるでしょうから、以下のプラグインもアップデートされると思うけど） iSlidex Appleのサイトっぽくしてくれるプラグイン。デモはこちら。 詳細：WordPress Plugin Directory: iSlidex SlideDeck Dynamic Content Slider 上記のような横向きアコーディオ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
