« blogの更新をしばらくおやすみします。 | トップページ | ソースコードをハイライトで表示してくれる「syntaxhighlighter 3.0.83」 #jQuery »

2011年4月18日 (月)

矢印ボタンや数字でスライドできるjQueryのプラグイン

矢印ボタンや数字のナビゲーションでスライドできるjQueryのプラグイン「Easy Slider 1.7 - Numeric Navigation jQuery Slider」使い方と導入方法を紹介します。

矢印ボタンを利用したスライドのデモページ
数字のナビゲーションを利用したスライドのデモページ

使用するリソース

jQuery

easySlider1.7.js

head要素への記入

・ボタンタイプの場合

<script language="javascript" type="text/javascript" src="フォルダ名/jquery.js"></script>
<script language="javascript" type="text/javascript" src="フォルダ名/easySlider1.7.js"></script>
<script type="text/javascript">
  $(document).ready(function(){
    $("#slider").easySlider({
    auto: true,
    continuous: true,
    });
  });
</script>
<link href="css/screen.css" rel="stylesheet" type="text/css" media="screen">

・数字ナビゲーションの場合

<script language="javascript" type="text/javascript" src="フォルダ名/jquery.js"></script>
<script language="javascript" type="text/javascript" src="フォルダ名/easySlider1.7.js"></script>
<script type="text/javascript">
  $(document).ready(function(){
    $("#slider").easySlider({
    auto: true,
    continuous: true,
    numeric: true
    });
  });
</script>
<link href="css/screen.css" rel="stylesheet" type="text/css" media="screen">

ボタンアイコンと数字ナビゲーションのデザインはscreen.cssファイルにて設定をしています。

オプションの設定方法
オプションの設定方法はどちらのタイプの場合も共通です。

記述場所
head要素の部分に記入します。
$("#slider").easySlider({
ここにオプションの設定を記入
});

設定できるオプションの値
speed:800,
 スライドする動きのスピードを調節します。
 数字を小さくすれば速く、大きくすれば遅くなります。

pause:2000,
 次のスライドを動かすまでの時間を設定します。
 数字を小さくすれば速く、大きくすれば遅くなります。

auto:true,
 スライドショーを自動で始めるかの設定をします。
 trueで自動的にスタート、falseでストップとなります。

continuous:true,
 スライドをループ再生させるか設定します。
 trueでループ再生、falseでループ再生をしない設定になります。

controlsShow:true,
 矢印ボタンや数字ナビゲーションを表示させる設定します。
 trueで表示、falseで非表示設定になります。

prevText:'Previous',
prevId:'prevBtn',
 prevTextにてボタンタイプで利用している戻る方のボタン内のテキストを指定できます。(実際の表示では隠れてしまいます。)
 prevIdで最初に移動するリンクのid名を設定できます。spanタグが生成され、指定されたidが出力されます。

nextText:'Next',
nextId:'nextBtn',
 nextTextにてボタンタイプで利用している戻る方のボタン内のテキストを指定できます。(実際の表示では隠れてしまいます。)
 nextIdで最初に移動するリンクのid名を設定できます。spanタグが生成され、指定されたidが出力されます。

firstText:'First',
firstShow:true,
firstId:'firstBtn',
 スライドショーの下に最初に移動するリンクが配置されます。
 lastTextにて表示される文字の設定をし、firstShow:trueで表示させます。
 firstIdで最初に移動するリンクのid名を設定できます。spanタグが生成され、指定されたidが出力されます。

lastText:'Last',
lastShow:true,
lastId:'lastBtn',
 スライドショーの下に最後に移動するリンクが配置されます。
 lastTextにて表示される文字の設定をし、lastShow:trueで表示させます。
 lastIdで最後に移動するリンク部分のid名を設定できます。spanタグが生成され、指定されたidが出力されます。

htmlファイルでスライドさせたい部分の記述方法

<div id="slider"> <ul> <li><a href=""><img src=""></a></li> <li><a href=""><img src=""></a></li> <li><a href=""><img src=""></a></li> <li><a href=""><img src=""></a></li> </ul> </div>

|

« blogの更新をしばらくおやすみします。 | トップページ | ソースコードをハイライトで表示してくれる「syntaxhighlighter 3.0.83」 #jQuery »

jQuery」カテゴリの記事

コメント

コメントを書く



(ウェブ上には掲載しません)


コメントは記事投稿者が公開するまで表示されません。



トラックバック

この記事のトラックバックURL:
http://app.f.cocolog-nifty.com/t/trackback/1378074/39623087

この記事へのトラックバック一覧です: 矢印ボタンや数字でスライドできるjQueryのプラグイン:

« blogの更新をしばらくおやすみします。 | トップページ | ソースコードをハイライトで表示してくれる「syntaxhighlighter 3.0.83」 #jQuery »