« タッチパネル用に最適化された日付や時刻を入力するプラグイン「Mobiscroll」 #jQuery | トップページ | JavascriptライブラリーとjQuery »

2011年8月 8日 (月)

ボタン付きのスライドショーを実装するjQueryプラグイン「Slides」 #jQuery

Slides

Slides, A Slideshow Plugin for jQuery」の導入方法をご紹介します。

デモページ

導入方法
1.ダウンロードと利用するファイル
2.head要素への記述
3.body要素への記述例
4.オプションの設定

1.ダウンロードと利用するファイル
slidesjs.comよりファイルをダウンロードします。
今回はexamplesフォルダ内の「Standard」を導入します。

使用するファイル
jquery-1.5.1.min.js
slides.min.jquery.js
global.css

2.head要素への記述
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script src="設置するフォルダまでのパス/slides.min.jquery.js"></script>
<link rel="stylesheet" href="設置するフォルダまでのパス/common.css" type="text/css" >
<script>
$(function(){
 $('#slides').slides({
  preload:true,
  preloadImage:'img/loading.gif',
  play:1000,
  pause:5000,
  hoverPause:true
 });
});
</script>

3.body要素への記述例
<div id="example">
 <div id="slides">
  <div class="slides_container">
   <!-- スライドブロック開始 -->
   <a href="#" title="" target="_blank">
   <img src="img/slide-1.jpg" width="570" height="270" alt="Slide 1"></a>
   <!-- スライドブロック終了 -->
  </div>
  <a href="#" class="prev">
  <img src="img/arrow-prev.png" width="24" height="43" alt="Arrow Prev"></a><!-- 左矢印を設置 -->
  <a href="#" class="next">
  <img src="img/arrow-next.png" width="24" height="43" alt="Arrow Next"></a><!-- 右矢印を設置 -->
 </div>
 <img src="img/example-frame.png" width="739" height="341" alt="Example Frame" id="frame"><!-- スライドフレームを設置 -->
</div>

スライドさせたい画像を増やす場合は、スライドブロック開始~スライドブロック終了までを枚数分コピー&ペーストしてお使いください。

4.オプションの設定
2.head要素への記述のplay:1000にてスライドさせるまでの時間をミリ秒で設定できます。
またpause:5000,で緑色の小さい丸ボタンを押してからスライドを再開させるまでの時間をミリ秒で設定できます。

|

« タッチパネル用に最適化された日付や時刻を入力するプラグイン「Mobiscroll」 #jQuery | トップページ | JavascriptライブラリーとjQuery »

jQuery」カテゴリの記事

コメント

コメントを書く



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


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



トラックバック

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

この記事へのトラックバック一覧です: ボタン付きのスライドショーを実装するjQueryプラグイン「Slides」 #jQuery:

« タッチパネル用に最適化された日付や時刻を入力するプラグイン「Mobiscroll」 #jQuery | トップページ | JavascriptライブラリーとjQuery »