slideViewerには3つのオプションが用意されています。オプションのうち2つはスライドが移動する際の方法と時間を指定するものです(表1)。
表1:easeFuncオプションとeaseTimeオプション
easeFunc | 方法(表2の値が指定できる) |
---|---|
easeTime | 移動にかかる時間(ミリ秒) |
これらのオプションは、slideView()のパラメータに{ オプション名 : 値 }のプロパティリスト形式で指定します。表2ではeaseFuncオプションで利用できる値を示しておきますので、興味のある方はいろいろ試してみると良いでしょう。
サンプル02では、easeFunc(移動方法)にeaseInOutBackを指定し移動にかかる時間を0.5秒にしています。
サンプル02
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<link rel="stylesheet" href="css/slideviewer.css" type="text/css">
<link rel="stylesheet" href="css/main.css" type="text/css">
<title>slideViewerサンプル</title>
<script type="text/javascript" src="js/jquery-1.2.1.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.2.js"></script>
<script type="text/javascript" src="js/jquery.slideviewer.1.1.js"></script>
<script type="text/javascript"><!--
$(function(){
$("#album").slideView({
easeFunc: "easeInOutBack",
easeTime: 500
});
});
// --></script>
</head>
<body>
<h1>slideViewerサンプル</h1>
<div id="album" class="svw">
<ul>
<li><img src="photo/001.jpg" width="384" height="216" alt="富士山"></li>
<li><img src="photo/002.jpg" width="384" height="216" alt="夕焼け"></li>
<li><img src="photo/003.jpg" width="384" height="216" alt="富山湾"></li>
<li><img src="photo/004.jpg" width="384" height="216" alt="白糸の滝"></li>
<li><img src="photo/005.jpg" width="384" height="216" alt="高原の朝"></li>
</ul>
</div>
</body>
</html>
表2: easeFuncオプションで利用できる値
easeInQuad | easeOutQuad | easeInOutQuad |
easeInCubic | easeOutCubic | easeInOutCubic |
easeInQuart | easeOutQuart | easeInOutQuart |
easeInQuint | easeOutQuint | easeInOutQuint |
easeInSine | easeOutSine | easeInOutSine |
easeInExpo | easeOutExpo | easeInOutExpo |
easeInCirc | easeOutCirc | easeInoutCirc |
easeInElastic | easeOutElastic | easeInOutElastic |
easeInBack | easeOutBack | easeInOutBack |
easeInBounce | easeOutBounce | easeInOutBounce |