Flashのようなアニメーションの動きをする jQuery プラグイン

Flashのようなアニメーションの動きをする jQuery プラグイン

久しぶりにいいなぁ~と思った jQuery プラグインがあったので使い方など込みで紹介したいと思います。

横や斜めのスライドを行ってくれるんですが、制御や変更するのも簡単なのでけっこう使えるかも?って感じです。

demo page

…ここからが続き

ダウンロード・使い方

Animate Panning Slideshow with jQuery

headタグ内

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.js"></script>
<script src="js/jquery.easing.1.3.js" type="text/javascript"></script>
<script src="js/jquery.timer.js" type="text/javascript"></script>
<script src="js/image-rotator.js" type="text/javascript"></script>

XHTML

<div id="window">
	<ul id="slideshow">
		<li><img src="images/101.jpg" alt="画像1"/></li>
		<li><img src="images/102.jpg" alt="画像2"/></li>
		<li><img src="images/103.jpg" alt="画像3"/></li>
		<li><img src="images/104.jpg" alt="画像4"/></li>
	</ul>
</div>

CSS

#window	{
	overflow:hidden;/* 必須 */
	position:relative;/* 必須 */
	width:960px;/* 画像1枚の横幅 */
	height:350px;/* 画像1枚の高さ */
	background: url(images/bg.gif);/* 任意 */
	border:3px solid #333;/* 任意 */
}

上記指定だと下記のような感じになります。

#slideshow	{
	width:1920px;/* 画像2枚分の横幅 */
	height:700px;/* 画像2枚分の横幅 */
	overflow:hidden;/* 必須 */
	position:relative;/* 必須 */
	padding:0;
	margin:0;
}
#slideshow li	{
	width:960px;/* 画像1枚の横幅 */
	height:350px;/* 画像1枚の高さ */
	float:left;/* 横並びに */
	display:inline;
}

もし overflow:hidden; の指定がなかったら下記のようになります。

image-rotator.js

$(document).ready(function(){
	
	var current_panel = 1;
	
	var animation_duration = 2500;//スライド時の動きの速さ
	
	$.timer(6000, function (timer) {
		//スライド至るまでの動きの速さ
		switch(current_panel){
			case 1:
				$("#slideshow").stop().animate({left: "-960px", top: "0px"}, {easing: 'easeOutBack', duration: animation_duration});//①左に何px 上に何px 移動するか指定
				current_panel = 2;
			break;
			case 2:
				$("#slideshow").stop().animate({left: "0px", top: "-350px"}, {easing: 'easeOutBack', duration: animation_duration});//②左に何px 上に何px 移動するか指定
				current_panel = 3;
			break;
			case 3://③左に何px 上に何px 移動するか指定
				$("#slideshow").stop().animate({left: "-960px", top: "-350px"}, {easing: 'easeOutBack', duration: animation_duration});
				current_panel = 4;
			break;
			case 4://④左に何px 上に何px 移動するか指定
				$("#slideshow").stop().animate({left: "0px", top: "0px"}, {easing: 'easeOutBack', duration: animation_duration});
				current_panel = 1;
			break;	
	  		timer.reset(12000);
		}
	});
	
});

上記に書いてある個所の数値を任意に変更すれば自分のサイトにあった感じに出来きますよ。

demo page

Comments

tsukapiko

tsukapiko

はじめまして、最近参考にさせてさせてもらってます。

なかなか思い通りになりませんが何かありましたら宜しくお願いいたします。

2010年08月30日 13:04

RodMond

RodMond

参考にさせていただいてます。
見てて気づいたんですが、
# #slideshow {
# width:1920px;/* 画像2枚分の横幅 */
# height:700px;/* 画像2枚分の横幅 */
# overflow:hidden;/* 必須 */
# position:relative;/* 必須 */
# padding:0;
# margin:0;
# }
の『height:700px;/* 画像2枚分の横幅 */』って画像2枚分の『縦幅』ですよね。
文字間違いがあったので報告させていただきました。

2010年05月21日 10:59

MM21

MM21

どうも。私も参考にさせていただいております。

今回のjQueryですが、FFやサファリ等は問題ないのですが
iE6で見ると三枚目が移動した際にズレが生じる感じなの
ですが、、jsの部分ですからie6用にだけ移動するpxを
変更させるというのは可能なんでしょうか?

2010年04月20日 11:36

Jun

Jun

はじめましてこんにちは。
とても参考になるのでいつも拝見させていただいております。

質問させてください。
自社サイトに使用させていただいたのですが、4枚の画像がスライドした後、1枚目の画像で固定させることは可能でしょうか?

お忙しいところ恐縮ですが、お時間が空いた時で構いませんのでお教えいただけると助かります。

よろしくお願いいたします。

2010年04月12日 17:03

Comment Form

※コメントが認証されるまで、コメントは反映されません。ご了承くださいませ。


(公開されません)
 
Captcha

画像の中に見える文字を入力してください。

page top へ

Sponsor

  • heteml
  • Movable Type

Category

Recent Article

2011 04-05
iPhone スマートフォンサイトのデザインのまとめ
2011 04-04
スマートフォン対応にしてみました
2011 04-01
CSS3 要素を透明に出来る Opacity と RGBa の使い方
2011 03-31
サイトリニューアルしました
2010 12-01
CSS3 でボタンを作る為のテクニック、サンプル集
2010 11-24
綺麗でリッチなフッターデザイン集のまとめ 60
2010 11-18
緑と黒色を使った Webデザインのサイト 25
2010 11-10
知っておいた方が便利なエクセルの知識

Recent Comments

Archive

2011年
2010年
2009年
2008年

Related Article