横スライダーだけど横スライダーじゃない！

javascript

http://www42.atpages.jp/schip/lesson0802/


Easy Sliderのパラメタを少しいじって
横スライダーなんですが、コマ送り動画を作ってみた。

フリーサーバなんでちょっと重いですが、ローカルでは結構面白いです。
ちなみに画像数24枚

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>横ライダー</title>
<link rel="stylesheet" href="css/slider.css">
<script src="js/jquery.min.js"></script>
<script src="js/easySlider1.7.js"></script>
<script src="js/slider.js"></script>
<!--[if lte IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!--[if lte IE 9]>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script>
<![endif]-->
</head>
<body>
<div id="slider">
<ul>
<li><img src="images/karate01.gif" /></li>
<li><img src="images/karate02.gif" /></li>
<li><img src="images/karate03.gif" /></li>
<li><img src="images/karate04.gif" /></li>
<li><img src="images/karate05.gif" /></li>
<li><img src="images/karate06.gif" /></li>
<li><img src="images/karate07.gif" /></li>
<li><img src="images/karate08.gif" /></li>
<li><img src="images/karate09.gif" /></li>
<li><img src="images/karate10.gif" /></li>
<li><img src="images/karate11.gif" /></li>
<li><img src="images/karate12.gif" /></li>
<li><img src="images/karate13.gif" /></li>
<li><img src="images/karate14.gif" /></li>
<li><img src="images/karate15.gif" /></li>
<li><img src="images/karate16.gif" /></li>
<li><img src="images/karate17.gif" /></li>
<li><img src="images/karate18.gif" /></li>
<li><img src="images/karate19.gif" /></li>
<li><img src="images/karate20.gif" /></li>
<li><img src="images/karate21.gif" /></li>
<li><img src="images/karate22.gif" /></li>
<li><img src="images/karate23.gif" /></li>
<li><img src="images/karate24.gif" /></li>
</ul>
</div>

</body>
</html>

#slider ul{
 list-style-type: none;
 margin: 0;
 padding: 0;
}
#slider li{
 width: 120px;
 height: 80px;
}

$(function(){
  $("#slider").easySlider({
	controlsShow:false,
	speed:10,
	auto:true,
	continuous:true,
	pause:700
  });
});

キモはspeedでスライドの動きの早さを速くして、pauseで滞在時間を短くすること！

ちなみに本家サイトにデフォルト値とオプションがまとめてあったのでやりやすいです！

＞｜
prevId: 'prevBtn'
prevText: 'Previous'
nextId: 'nextBtn'
nextText: 'Next'
controlsShow:true
controlsBefore:''
controlsAfter:''
controlsFade:true
firstId: 'firstBtn'
firstText: 'First'
firstShow:false
lastId: 'lastBtn'
lastText: 'Last'
lastShow:false
vertical:false
speed: 800
auto:false
pause:2000
continuous:false
numeric: false
numericId: 'controls