HOME > 開発メモ > ニュースティッカーの表示で使いやすいJQueryプラグイン「JQUERY NEWS TICKER」
2014/12/24 (2016/09/14更新) タグ: ,

ニュースティッカーの表示で使いやすいJQueryプラグイン「JQUERY NEWS TICKER」

ニュースティッカーというのは、1行表示で文字が流れてくるアレのことです。JQueryで探すといろいろなものがでてきましたが、いくつか試してみて使いやすかったのは「JQUERY NEWS TICKER」でした。

SPONSOR

どんなティッカー?

下のように文字が流れてきます。表示中のデザインは癖があるので、そのまま使うのは…ですが、CSSも単純ですので自由にカスタマイズできました。
rec
まずはJQUERY NEWS TICKERサイト内の、「DOWNLOAD NOW」ボタンからソースコード一式をダウンロードします。

設置方法

ダウンロードしたフォルダ内には、不要なファイルも含まれていますが、必要なのは

<link href="styles/ticker-style.css" rel="stylesheet" type="text/css" />
<script src="includes/jquery.ticker.js" type="text/javascript"></script>

の2つです。もちろん事前にJQueryは読み込ませておいてください。

そして表示させるTIPS。

<ul id="js-news" class="js-hidden">
    <li class="news-item"><a href="#">This is the 1st latest news item.</a></li>
    <li class="news-item"><a href="#">This is the 2nd latest news item.</a></li>
    <li class="news-item"><a href="#">This is the 3rd latest news item.</a></li>
    <li class="news-item"><a href="#">This is the 4th latest news item.</a></li>
</ul>

あとは、実行。

<script type="text/javascript">
    $(function () {
        $('#js-news').ticker();
    });
</script>

まずは、これで動作します。

オプション

よく使いそうなオプションだけ抜粋紹介。
speed: 0.10 …ティッカーの表示スピードです。
controls: true …停止、再生、次へ、前へのボタンを表示するかどうか
titleText: ‘Latest’ …ティッカーのタイトル
pauseOnItems: 2000 …次のティッカーを表示するまでの時間

CSSやJQuery本体もシンプルなので、カスタマイズしやすいと思います。

JQUERY NEWS TICKER

この記事をシェアする

イリテクの最新記事をお届けします

イリテクの最新情報をチェック!
  • follow us in feedly
    RSSで最新記事を読む

イリテクで開発したサービス

請求書作成業務をもっとかんたんに。見積請求書の作成だけでなく、郵送代行、メール送信、PDFダウンロードなどバックオフィスを効率化。

詳しくはこちら

イリテクが提案する「月額固定のシステム開発」

こちらの記事もおすすめです

SPONSER

プロフィール
入江 慎吾
デザインエンジニア。イリテク株式会社 代表取締役。Webシステム開発、Webサイト制作、スマートフォンアプリ開発を受託で行うほか、自社企画でクラウド見積請求書作成サービス「CLOUD PAPER」を開発・運営。仕様を決めずに少ない予算でも開発をスタートできる「月額固定のシステム開発」を実施中。(もっと詳しく
新着記事
開発したWebサービス
カテゴリ/タグ
ブログ更新メール
ブログが更新されるとメールでお知らせします。