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. Flex-Slider-jQuery

    JavaScript

    シングルでもマルチでもOKなフレキシブルなスライダー「Flex-Slider-jQuery」

    Flex-Slider-jQueryは、フレキシブルなスライダーを実装…

  2. no-image

    JavaScript

    豊富なオプションでカスタマイズ性も高いjQueryスライダー「startVal」

    startValは豊富なオプションやAPIを有したカスタマイズ性の高い…

  3. PopCircle
  4. Force.js

    JavaScript

    要素を手軽にアニメーション化できる「Force.js」

    Force.jsはページ上の要素を手軽にアニメーション化させることがで…

  5. Footnoted

    JavaScript

    脚注(注釈)を入れたい時に役立つjQueryプラグイン「Footnoted」

    FootnotedというjQueryプラグインは文章の中に脚注(注釈)…

  6. jQuery Accordion

最近の記事

  1. オリジナルチキン6ピース
  2. 200-DGCAM019
  3. ハクバ GW-PRO RED フォトグローブプロ PL
  4. Soundcore Liberty Air 2

アーカイブ

PAGE TOP