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

Category ：
Javascript

久しぶりにいいなぁ～と思った 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);
		}
	});
	
});

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

Comments

tsukapiko

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

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

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

2010年05月21日 10:59