jglycy-1.0.jsとjquery.cycle.jsファイルを読込むだけで画像切替りエフェクトを実装する方法｜DAD UNION

jglycy-1.0.jsとjquery.cycle.jsファイルを読込むだけで画像切替りエフェクトを実装する方法をご紹介します。

Contents

jglycy-1.0.jsとjquery.cycle.jsファイルを読込むだけで画像切替りエフェクトを実装するJavaScriptの記述
画像切替りエフェクトを実装するcssの記述
画像切替りエフェクトを実装するHTMLの記述
JavaScriptを記述せずjQueryのプラグインやエフェクトを実装させたデモページ
ソース元：jQuery Cycle Plugin

jglycy-1.0.jsとjquery.cycle.jsファイルを読込むだけで画像切替りエフェクトを実装するJavaScriptの記述

※jquery.min.js、jglycy-1.0.js、jquery.cycle.js、jquery.easing.min.jsファイルを読み込みます。

<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>

画像切替りエフェクトを実装する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>

画像切替りエフェクトを実装するHTMLの記述

※「フェードイン／フェードアウトで画像を切り替え」と「ズームインで画像を切り替え」2パターンの画像切替りエフェクトを実装してみました。
　「フェードイン／フェードアウトで画像を切り替え」エリアのタグには「jg=”cycle”」を、「ズームインで画像を切り替え」エリアのタグには「jg=”cycle” jg:cycle=”fx:’zoom’,delay:-2000″」を設定します。

<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-->