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

no-imageレスポンシブ対応の超軽量なjQueryイメージスライダー「tinyslide」前のページ

高性能なイメージビューアを実装できる「PhotoViewer」次のページno-image

関連記事

  1. hummingbird-popover

    JavaScript

    高速・軽量なコンテキストメニュー実装「hummingbird-popover」

    hummingbird-popoverは高速・軽量なコンテキストメニュ…

  2. Rythim.js

    JavaScript

    音楽のリズムに合わせてボタンなどに躍動感を与える「Rythim.js」

    Rythm.jsは、あなたのホームページに躍動感を与えてくれるjsライ…

  3. jQuery RS Carousel

    JavaScript

    レスポンシブ対応のシンプルなカルーセルを実装できる「jQuery RS Carousel」

    レスポンシブ対応のシンプルなカルーセルを実装できるjQueryプラグイ…

  4. jcSlider

    JavaScript

    CSS3を使ったレスポンシブ対応スライダーを実装できるjQueryプラグイン「jcSlider」

    jcSliderは、アニメーションを使用しないスライダーのプラグインで…

  5. Flurry

    JavaScript

    Webページに雪を美しく降らせる冬にピッタリのjQueryプラグイン「Flurry」

    FlurryはWebページに雪を美しく降らせてくれるアニメーションを実…

  6. JavaScript

    ライトボックスみたいなお洒落なアラートを出してカスタマイズもできるjQuery uLightBox …

    ライトボックスみたいなお洒落なアラートを表示させることができるjQue…

最近の記事

  1. 梅
  2. CAR-HLD12BK
  3. OWL-LPB6701LA

アーカイブ

PAGE TOP