2008年4月21日

jQueryCycleプラグインでスライドショー作成

はじめまして。4月から入社しました小川です。

実は1年以上前からアルバイトとしてアシアルで働いていたのですが、この春専門学校を卒業して、晴れて正社員になりました。
流石に1年以上いるだけあって環境にはだいぶ慣れてはいますが、初めての社会人ということもあり中々緊張のとけない毎日です。早く一人前の社会人になれるよう頑張ります。

さて、今回が初めてのブログ投稿となりますが、今回はjQueryのプラグインの、jQuery Cycle Pluginというものを使って簡単にスライドショーを作ってみたいと思います。

まずはこちらをご覧ください。

どうでしょう。Javascriptを有効にされていれば、簡単なスライドショーが表示されたと思います。実はこれを実行するために最低限必要なコードですが・・・


<script type="text/javascript">
//<![CDATA[
jQuery(document).ready(function() {
  jQuery('#slide1').cycle();
});
//]]>
</script>
<div id="slide1">
  <a href="https://www.asial.co.jp/image1.gif &mode=1" class="popupimg"><img src="https://www.asial.co.jp/image1.gif"></a>
  <a href="https://www.asial.co.jp/image2.gif &mode=1" class="popupimg"><img src="https://www.asial.co.jp/image2.gif"></a>
  <a href="https://www.asial.co.jp/image3.gif &mode=1" class="popupimg"><img src="https://www.asial.co.jp/image3.gif"></a>
</div>

なんとたったのこれだけです。
もちろん機能はこれだけではありません。プロパティをハッシュで渡すことで、多彩なエフェクトなど追加することができます。たとえば、以下の例の小さなアイコンをクリックしてみてください。


jQuery('#slide2').before('<div id="nav2">').cycle({
  fx: 'scrollLeft',
  speed: 'fast',
  timeout: 0,
  next: '#slide2',
  pager: '#nav2',
  pagerAnchorBuilder: function(idx, slide) {
    return '<a href="#"><a href="https://www.asial.co.jp' + slide.src + ' &mode=1" class="popupimg"><img src="https://www.asial.co.jp' + slide.src + '"></a></a>';
  }
});

このようにページャも自動で作成してくれます。各オプションの説明をしていきますと、


fx ... スクロール時のエフェクト
speed ... スクロールの速度
timeout ... 自動スクロールするまでの時間
next ... 「次へ」に値するHTML要素のID（「前へ」はprev）
pager ... ページャとなるHTML要素のID
pageAnchorBuilder ... ページャ用のコールバック関数