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:切り替えるタイミング指定