no-image

JavaScript

かっこいいニュース・バナースライドショー実装「jQuery News Slider」

jQuery News Sliderは、かっこいいニュース・バナースライドショーを実装できるjQueryプラグインです。サムネイル画像をクリックすることでフェードやスライドなどのアニメーションで画像が切り替わります。

jQuery News Slider

デモ

デモではサムネイル画像が設置されたスライダーとホバーをすることでサムネイル画像が表示するスライダーの2種類が用意されています。

サムネイルの位置はそれぞれ異なっており、上のスライダーは右側へ、下のスライダーは左側に設置されています。どちらも一定時間が経過すると自動的に画像が切り替わる仕組みです。

もちろんサムネイル画像をクリックすれば任意の画像へ移動させることもできます。

横からスライドしたり斜めからスライドしたりフェードで切り替わったりと、いろいろなアニメーションで画像が切り替わるので、ユーザーの注目度も高まりますね。

最新ニュースの表示やバナー・イメージギャラリーなど、応用次第で多彩な用途に活用できるのではないでしょうか?

オプションには、align、backgrounds、direction、effect、hide、text、valignといった項目が用意されています。ナビゲーションの位置やエフェクト、キャプションなどオプションを用いることで簡単に設定できるのが便利ですね。

ちなみにエフェクト(effect)は、fade、slide、randomという値の中から選択できます。

jQuery News Slider

関連記事

  1. WD_ImageStax

    JavaScript

    山積みされた写真をシャッフルさせるフォトギャラリー「WD_ImageStax」

    WD_ImageStaxは無造作に山積みされた写真をシャッフルさせるフ…

  2. Background Blur

    JavaScript

    画像をボカしてくれるクロスブラウザ対応の「Background Blur」

    Background Blurは画像をカッコよくボカしてくれるクロスブ…

  3. JavaScript

    テーブルを綺麗なデザインにしてくれたり並び替え(ソート)もできるjQuery「tablesorter…

    jQueryのプラグインで、テーブルをフレキシブルなデザインにしてくれ…

  4. no-image

    JavaScript

    軽量なスティッキー要素を実装できるjQueryプラグイン「Zebra Pin」

    Zebra Pinは軽量なスティッキー要素を実装できるjQueryプラ…

  5. no-image

    JavaScript

    カードを入れ替えるような3Dアニメーションによるスライダー「stack-slider」

    stack-sliderはカードを入れ替えるような3Dアニメーションに…

  6. Impulse Slider

    JavaScript

    3Dスライダーを実装できるjQueryプラグイン「Impulse Slider」

    Impulse SliderというjQueryプラグインを使えば3Dス…

最近の記事

  1. USB-2H401BKN
  2. Dyson Pure Cool Me
  3. ルック セレクション
  4. シルキーウインドモバイル

アーカイブ

PAGE TOP