jglycy-1.0.js、jquery.cycle.jsを読込むだけで画像切替りエフェクトを実装

1.JavaScriptの記述

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script type="text/javascript" src="jglycy-1.0.js"></script>
<script src="jquery.cycle.all.js"></script>
<script src="jquery.easing.min.js"></script>

2.cssの記述

<style type="text/css">
<!--
body{
	margin:0;
	padding:0;
}
h1{
	font-size:16px;
	font-weight:normal;
	line-height:2.0em;
	text-align:center;
	padding:15px 0;
}
#idWrap{
	width:600px;
	margin:0 auto;
	text-align:center;
}
-->
</style>

3.HTMLの記述

<div id="idWrap">

<h1><a href="jquery.cycle.all.js" target="_blank" title="jquery.cycle.all.js">jquery.cycle.all.js</a>と<a href="jquery.easing.min.js" target="_blank" title="jquery.easing.min.js">jquery.easing.min.js</a>のプラグインを読み込むだけで画像の切り替わりを実装させて見ました。</h1>

    
<!--フェードイン／フェードアウトで画像を切り替え-->

<div style="height: 300px; width: 300px; padding: 0; margin: 0; float:left;" jg="cycle">
<img src="i1.jpg" width="300" height="300">
<img src="i2.jpg" width="300" height="300" style="display:none;">
<img src="i3.jpg" width="300" height="300" style="display:none;">
</div>


<!--ズームインで画像を切り替え-->

<div style="height: 300px; width: 300px; padding: 0; margin: 0; float:left;" jg="cycle" jg:cycle="fx:'zoom',delay:-2000">
<img src="i1.jpg" width="300" height="300">
<img src="i2.jpg" width="300" height="300" style="display:none;">
<img src="i3.jpg" width="300" height="300" style="display:none;">
</div>

    
</div>
<!--/idWrap-->

JavaScriptを記述せずjQueryのプラグインやエフェクトを実装させたデモ

ソース元：
jQuery Cycle Plugin