noobSlideみたいなのをPrototype.jsとScriptaculousで作ってみた。

スムーズなスライドを意外と簡単に作ることができます。

サンプル

こんな感じのスライドをPrototype.jsとScriptaculousのエフェクトで簡単に表現できます。考え方として、ScriptaculousのEffect.Morphを使ってスタイルを動的に変化させます。 id:MoveSampleにoverflow:hiddenを使い、内包の横に並ばせた要素を隠します。
隠した要素をEffect.Morphでスタイルのmargin-leftをマイナスに指定することで、横に移動させます。
これで、なめらかにスライドを変更することができます。
応用すればhtmlを表示させたりできますね。

ちなみにnoobSlideはこれ。
http://efectorelativo.net/laboratory/noobSlide/sample.html

作り方は以下のソースを参考にしてください。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>画像スライドスクリプト</title>
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js"></script>
<script type="text/javascript">
function SlideBox(Elements,Num,BodyElement){
		var WHStyle = Element.getDimensions(BodyElement);
		Position = WHStyle.width * Num;
		new Effect.Morph(Elements,{style:"margin-left:-" + Position + "px;",duration:0.8});
	}
</script>
<style type="text/css">
#MoveSample { margin:0; padding:0; width:500px; height:350px; overflow:hidden;}
#InMoveBox { width:6000px; margin-left:0px; padding:0;} /* widthはInMoveBoxの総幅を指定 */
#InMoveBox li { float:left;}
</style>
</head>

<body>
<div id="MoveSample">
<ul id="InMoveBox">
<li><img src="img/1.jpg" /></li>
<li><img src="img/2.jpg" /></li>
<li><img src="img/3.jpg" /></li>
<li><img src="img/4.jpg" /></li>
<li><img src="img/5.jpg" /></li>
<li><img src="img/6.jpg" /></li>
<li><img src="img/7.jpg" /></li>
<li><img src="img/8.jpg" /></li>
<li><img src="img/9.jpg" /></li>
<li><img src="img/10.jpg" /></li>
<li><img src="img/11.jpg" /></li>
<li><img src="img/12.jpg" /></li>
</ul>
</div>

<!-- SlideBox('InMoveBox',0,'MoveSample')は('スライドの親のID',0～のスライド数,'スライド領域のID') -->
<ul>
<li><a href="javascript:void(0)" onclick="SlideBox('InMoveBox',0,'MoveSample')">1</a></li>
<li><a href="javascript:void(0)" onclick="SlideBox('InMoveBox',1,'MoveSample')">2</a></li>
<li><a href="javascript:void(0)" onclick="SlideBox('InMoveBox',2,'MoveSample')">3</a></li>
<li><a href="javascript:void(0)" onclick="SlideBox('InMoveBox',3,'MoveSample')">4</a></li>
<li><a href="javascript:void(0)" onclick="SlideBox('InMoveBox',4,'MoveSample')">5</a></li>
<li><a href="javascript:void(0)" onclick="SlideBox('InMoveBox',5,'MoveSample')">6</a></li>
<li><a href="javascript:void(0)" onclick="SlideBox('InMoveBox',6,'MoveSample')">7</a></li>
<li><a href="javascript:void(0)" onclick="SlideBox('InMoveBox',7,'MoveSample')">8</a></li>
<li><a href="javascript:void(0)" onclick="SlideBox('InMoveBox',8,'MoveSample')">9</a></li>
<li><a href="javascript:void(0)" onclick="SlideBox('InMoveBox',9,'MoveSample')">10</a></li>
<li><a href="javascript:void(0)" onclick="SlideBox('InMoveBox',10,'MoveSample')">11</a></li>
<li><a href="javascript:void(0)" onclick="SlideBox('InMoveBox',11,'MoveSample')">12</a></li>
</ul>
</body>
</html>