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. Spring Loaders

    JavaScript

    ポリゴンによるローディングアニメーションがかっこいい「Spring Loaders」

    Spring Loadersはポリゴンでつくられたローディングアニメー…

  2. no-image

    JavaScript

    あらかじめ設定したリストなどから複数タグを選択できる「Tokenize2」

    Tokenize2は、あらかじめ設定したリストやAjaxから複数のタグ…

  3. infoBox

    JavaScript

    マウスオーバーでインフォメーションボックスを表示させる「infoBox」

    infoBoxはアイコンにマウスオーバーするとインフォメーションボック…

  4. jQueryでウィンドウサイズによって処理を変える

    JavaScript

    jQueryでsetTimeoutを使えば各要素のアニメーションを実行させる時間を調整できる

    jQueryのsetTimeoutを使えば何秒後に実行するかといったこ…

  5. Fitty

    JavaScript

    親コンテナにテキストをフィットさせられる「Fitty」

    Fittyはテキストをスケールアップ、またはスケールダウンして親コンテ…

  6. Schedule Template

    JavaScript

    シンプルなスケジュール表を実装する「Schedule Template」

    スッキリしたデザインのシンプルなスケジュールテンプレートを実装するため…

最近の記事

  1. ダミアン・ハースト 桜
  2. パッキングエリア
  3. あらびきソーセージパイ
  4. REACH フロス
PAGE TOP