jQueryを使った、ランダム画像で様々なシャッフル演出効果のあるプラグイン

何はともあれサンプルを見てみるのが早いかも

初級者用サンプルデモ

中級者用サンプルデモ１

中級者用サンプルデモ２

上級者編サンプル１

上級者編サンプル２

その他のバライティサンプル

JQueryの基本的構造

基本はjquery.jsと、プラグイン用のjsファイルをまず読み込みます。
※あくまでも基本構造の説明なので、この通りコピペしてもうごきません。

<script type="text/javascript" src="../jquery-1.2.1.js"></script>
<script type="text/javascript" src="../chili-1.7.pack.js"></script>
<script type="text/javascript" src="jquery.cycle.all.js?v2.03"></script>
<script type="text/javascript">
$(function() {
// run the code in the markup!
$('td pre code').each(function() {
eval($(this).text());
});
});
</script>

その後、画像を配置する所をdivで囲み、idを振ります。

<div id="s4" class="pics">
<img src="images/beach1.jpg" width="200" height="200" />
<img src="images/beach2.jpg" width="200" height="200" />
<img src="images/beach3.jpg" width="200" height="200" />
</div>

IDを振ったら、最後の</body>の直前あたりに、サンプルで指定されたものを入れます。

<script type="text/javascript">
ここにいれる。
</script>

たとえば、初級者用サンプルデモであれば、

$('#s1').cycle('fade');

や、

$('#s2').cycle({
fx: 'scrollDown'
});

と言ったものです。

CSSもサンプル画面に掲載されているのでわかるかと思います。

.pics {
height: 232px;
width: 232px;
padding: 0;
margin: 0;
}

.pics img {
padding: 15px;
border: 1px solid #ccc;
background-color: #eee;
width: 200px;
height: 200px;
top: 0;
left: 0
}

JQuery Cycle Plugin
ちょっとJqueryを最初から作って試すのは大変だと思ったら、このプラグインをお勧めします。

Downloadは以下のリンク先に。