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. JavaScript

    軽量(5KB)で機能も色々あるjQueryのスライダー「MobilySlider」を使ってみる

    軽量なんですが、色々と機能もあるいい感じのjQueryプラグイン「Mo…

  2. Multi-level push menu
  3. css3-mediaqueries-js

    JavaScript

    Media QueriesをIE8以下でも使えるようにするための「css3-mediaqueries…

    前回、Media Queriesの@mediaを使用したCSSをまとめ…

  4. no-image
  5. MoveTo

    JavaScript

    軽量なスムーススクロールを実装できるJSライブラリ「MoveTo」

    MoveToは軽量(圧縮版で1KBほど)なスムーススクロールを実装する…

最近の記事

  1. Apple WatchでのMacロック解除を無効
  2. オータムスイートポテトフラペチーノ
  3. 紅葉
  4. ナノケア EH-NA0E
  5. スターバックス コロンビア サンタンデール

アーカイブ

PAGE TOP