javascript > jQuery > cycle plugin
- 画像を変更したい時に使う.
- sample page
sample code
<html>
<head>
<title>cycle demo page</title>
<script type="text/javascript" src="jquery-1.3.min.js"></script>
<script type="text/javascript" src="jquery.cycle.js"></script>
<script type="text/javascript">
$(function(){
$("#title").html("cycle demo page");
$('#s1').cycle({
fx: 'fade',
speed: 500
});
$('#s2').cycle({
fx: 'fade',
speed: 5500
});
});
</script>
<style type="text/css">
#test{
padding: 10px;
border: 2px solid;
width: 300px;
list-style-type: none;
}
</style>
</head>
<body>
<div id="test">
<div id="s1" class="pics">
<li><img src="img/image01.jpg"></li>
<li><img src="img/image02.jpg"></li>
<li><img src="img/image03.jpg"></li>
<li><img src="img/image04.jpg"></li>
</div>
</div>
<div id="s2" class="pics">
<img src="img/image05.jpg">
<img src="img/image06.jpg">
<img src="img/image07.jpg">
<img src="img/image08.jpg">
<img src="img/image09.jpg">
</div>
</div>
</body>
</html>
- id:s1,class:picsを指定する。
-
fx:画像切替時の挙動を指定。
* fade * scrollUp * scrollDown * scrollLeft * scrollRight * shuffle
- speed:切り替えるタイミング指定
