ニュースティッカーをjQueryで実装する／bxslider編

jQuery2013年2月14日

お知らせを省スペース化するためのニュースティッカーをjQueryで実装いたしましたので、手順をご紹介いたします。今回はjQueryのプラグイン、「bxslider」を使用して作成いたしました。
本来画像のスライドショーなどによく使われるプラグインですが、テキストコンテンツをリッチに見せる用途としても使用できます。実装も容易だったため、今回はこちらを活用いたしました。

jQuery本体に加え、プラグイン「bxslider」とイージングのプラグイン「jQuery easing」が必要となります。
まずは下記のURLより必要なファイルをダウンロードし、読み込みを行ってください。

よく見るニュースティッカーを、bxsliderを使用して3パターン作成しています。

HTML

<p>垂直スライド、ループあり、イージング「easeOutBounce」</p>
<ul class="list-01">
<li>【ニュース1】ほげほげほげほげほげほげほげほげほげほげほげほげほげほげ</li>
<li>【ニュース2】ふがふがふがふがふがふがふがふがふがふがふがふがふがふが</li>
<li>【ニュース3】もげもげもげもげもげもげもげもげもげもげもげもげもげもげ</li>
<li>【ニュース4】ほがほがほがほがほがほがほがほがほがほがほがほがほがほが</li>
<li>【ニュース5】もがもがもがもがもがもがもがもがもがもがもがもがもがもが</li>
</ul>
<p>水平スライド、ループあり、イージング「linear」</p>
<ul class="list-02">
<li>【ニュース1】ほげほげほげほげほげほげほげほげほげほげほげほげほげほげ</li>
<li>【ニュース2】ふがふがふがふがふがふがふがふがふがふがふがふがふがふが</li>
<li>【ニュース3】もげもげもげもげもげもげもげもげもげもげもげもげもげもげ</li>
<li>【ニュース4】ほがほがほがほがほがほがほがほがほがほがほがほがほがほが</li>
<li>【ニュース5】もがもがもがもがもがもがもがもがもがもがもがもがもがもが</li>
</ul>
<p>フェードイン、ループなし、イージング設定なし</p>
<ul class="list-03">
<li>【ニュース1】ほげほげほげほげほげほげほげほげほげほげほげほげほげほげ</li>
<li>【ニュース2】ふがふがふがふがふがふがふがふがふがふがふがふがふがふが</li>
<li>【ニュース3】もげもげもげもげもげもげもげもげもげもげもげもげもげもげ</li>
<li>【ニュース4】ほがほがほがほがほがほがほがほがほがほがほがほがほがほが</li>
<li>【ニュース5】もがもがもがもがもがもがもがもがもがもがもがもがもがもが</li>
</ul>

js

$(document).ready(function(){
$('ul.list-01').bxSlider({
easing:'easeOutBounce',
controls:false,
auto: true,
pager: false,
speed: 1000,
pause: 5000,
mode: 'vertical'
});

$('ul.list-02').bxSlider({
easing:'linear',
controls:false,
auto: true,
pager: false,
speed: 1000,
pause: 5000
});

$('ul.list-03').bxSlider({
controls:false,
auto: true,
pager: false,
speed: 1000,
pause: 5000,
mode: 'fade',
infiniteLoop: false
});
});

解説

ライブラリの読み込みをすれば、あとは基本の記述に沿って各種オプションを設定すればイージングやループなど、様々な要素をコントロールすることが可能です。

各種オプションの基本的な記述

各種オプションは、半角カンマ区切りのハッシュ形式で指定します。設定値や文字列はシングルもしくはダブルクォーテーションで囲み、それ以外のtrueかfalse、数値はそのまま記述することで設定が可能です。

$("#hoge").bxSlider({
オプション:"値",
オプション:true,
オプション:500,
});

オプション一覧

auto：trueで自動スライド
mode：verticalで垂直スライド、fadeでフェードイン
easing：linearで等速アニメーション（jQuery easingを入れることで、色々なイージングが可能）
speed：アニメーション速度を指定
pause：静止時間を指定
autoHover：trueでロールオーバーすると次へのスライドを停止
infiniteLoop：falseでループなし
startingSlide：数値指定で最初のアイテムを指定
controls：falseで前後へのリンクを非表示に
prevText,nextText："文字列"で前後へのリンク文字を指定
prevImage,nextImage："URL"で前後へのリンク画像を指定
autoControls：trueでアニメーションの開始と停止のリンクを表示
pager：trueで全アイテムへのページネーションを表示
displaySlideQty：表示する項目数を数値指定
moveSlideQty：一括でアニメーションさせる項目数を数値指定

この記事を読んでいる方にオススメの記事

「jQuery」の他の記事を読む

この記事にコメントする

※承認制のため、即時には反映されません。