【jQuery】
- - -◆落とすのは◆- - -
jquery.tinycarousel.js
- - -◆HTMLファイルに◆- - -
１）<head></head>内に
<script type="text/javascript">
$(document).ready(function(){
$('#slider-code').tinycarousel();
});
</script>
２）</body>の直前に
<script src="http://code.jquery.com/jquery-1.7.min.js" type="text/javascript" charset="utf-8"></script>
<script src="/resources/js/jquery.tinycarousel.js" type="text/javascript" charset="utf-8"></script>
３）動かしたい所
<div id="slider-code">
<a class="buttons prev" href="#">left</a>
<div class="viewport">
<ul class="overview">
<li><img src="images/picture3.jpg" /></li>
<li><img src="images/picture2.jpg" /></li>
<li><img src="images/picture1.jpg" /></li>
</ul>
</div>
<a class="buttons next" href="#">right</a>
</div>
- - -◆CSSファイルに◆- - -
#slider-code { height: 125px; overflow:hidden; }
#slider-code .viewport { float: left; width: 240px; height: 125px; overflow: hidden; position: relative; }
#slider-code .buttons { display: block; margin: 30px 10px 0 0; float: left; }
#slider-code .next { margin: 30px 0 0 10px; }
#slider-code .disable { visibility: hidden; }
#slider-code .overview { list-style: none; position: absolute; padding: 0; margin: 0; left: 0; top: 0; }
#slider-code .overview li{ float: left; margin: 0 20px 0 0; padding: 1px; height: 121px; border: 1px solid #dcdcdc; width: 236px;}
- - -◆オプション色々◆- - -
start: 1 -- where should the carousel start?
display: 1 -- how many blocks do you want to move at a time?
axis: 'x' -- vertical or horizontal scroller? 'x' or 'y' .
controls: true -- show left and right navigation buttons?
pager: false -- is there a page number navigation present?
interval: false -- move to the next block on interval.
intervaltime: 3000 -- interval time in milliseconds.
animation: true -- false is instant, true is animate.
duration: 1000 -- how fast must the animation move in milliseconds?
callback: null -- function that executes after every move
これらを追加したいときは、
<head></head>内に書いたスクリプトに
<script type="text/javascript">
$(document).ready(function(){
$('#slider-code').tinycarousel({ pager: true, interval: true });
});
</script>
などと追記していけばOK。
* * *
配布元：
http://www.baijs.nl/tinycarousel/
最終更新：2011年11月21日 14:17
