Nutspress

jQuery を使ったシンプルなスライドショー

仕事でスライドショーを設置してほしいという依頼があって、はじめフラッシュでとの要望があったのですが、すでに2つもフラッシュが組み込まれているページだったため今回はjQueryを使ったスライドショーを使ってみることにしました。

Slides
設置は簡単、jQueryとSlidesというスクリプトをページに読み込ませて、どの画像を表示させるかをしていするだけ。

スライドショーを展開させる画像元にid=”slideshow”を指定して、次のコードを記述する。

	<script type="text/javascript" src="jquery.js"></script>
		<script type="text/javascript" src="jquery.slides.js">
		</script>
		<script type="text/javascript">
			(function($) {
			$('#slideshow').Slides({images : [
				'sample1.jpg',
				'sample2.jpg',
				'sample3.jpg',
				'sample4.jpg'
			]});
			})(jQuery);
		</script>

きれいにフェードしながら切り替わっていくのでフラッシュのように文字をのせて動かしたりなどのような効果を必要としないスライドショーであれば、これで十分だと思います。

基本的には画像の枚数に制限がないのがありがたいところ。
切り替え時間の管理はjquery.slides.js内の

$('#slides').Slides({images : [...], pause : 6000, fade : 2000});

で管理できます。

ただし、文字エンコードはutf-8で。（Shift-jisだと実行時にエラーが出て動きませんでした）

他にもmootoolsを使ったものとかも配布されているようで、コリスさんのところでまとめて紹介されています。

Tags: Javascript, jQuery, slideshow, スライドショー

This entry was posted on Sunday, April 19th, 2009 at 1:59 pm and is filed under Javascript. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.