Continuando a seqüência de plugins para transição de imagens, apresento a vocês o plugin JQuery Cycle.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<title>JQuery Cycle Plugin - Effects Browser</title>
 
<style type="text/css">
body{ font-size:11px; font-family:Arial,Verdana; }
#choices { cursor: pointer; }
td { text-align: center; }
li { list-style: none; width:100px; float:left; }
li:hover{ text-decoration:underline; color:#0066CC; }
h1#effect { text-align: center; padding-bottom: 15px }
.pics { padding: none; width: 202px; height: 202px; margin:auto; }
.pics img { padding: none; width: 200px; height: 200px; border: 1px solid #ccc; }
</style>
<link rel="stylesheet" type="text/css" media="screen" href="cycle.css" />
 
<script type="text/javascript" src="http://www.shiguenori.com/jquery/jquery.js"></script>
<script type="text/javascript" src="jquery.easing.js"></script>
<script type="text/javascript" src="jquery.cycle.js?v2.23"></script>
<script type="text/javascript">
 
$('<img />')[0].src = 'images/beach1.jpg';
$('<img />')[0].src = 'images/beach2.jpg';
$('<img />')[0].src = 'images/beach3.jpg';
 
$(function() {
   var efeito, cbox = $('input:checkbox').change(start)[0];
   $('#choices li').click(function() {
      // Usar a função trim do jquery porque nos IEs o nome do efeito vinha com espaço no final
      efeito = jQuery.trim($(this).text());
      start();
   });
 
   function start() {
      var markup = '<div class="pics"><img src="images/beach1.jpg"><img src="images/beach2.jpg"><img src="images/beach3.jpg"></div>';
      $('div.pics').remove();
 
      $(markup).insertAfter('#effect').cycle({
         fx: efeito,
         timeout: 1000,
         delay:  -1000,
         sync: cbox.checked
      });
      $('#effect').html(efeito);
   }
});
</script>
 
</head>
<body>
<h1>Plugin jQuery Cycle - Navegador de efeitos</h1>
<div id="main">
   <table width="100%">
      <tr>
         <td>
         <ul id="choices">
            <li>blindX</li>
            <li>blindY</li>
 
            <li>blindZ</li>
            <li>cover</li>
            <li>curtainX</li>
            <li>curtainY</li>
            <li>fade</li>
            <li>fadeZoom</li>
 
            <li>growX</li>
            <li>growY</li>
            <li>scrollUp</li>
            <li>scrollDown</li>
            <li>scrollLeft</li>
            <li>scrollRight</li>
 
            <li>scrollHorz</li>
            <li>scrollVert</li>
            <li>shuffle</li>
            <li>slideX</li>
            <li>slideY</li>
            <li>toss</li>
 
            <li>turnUp</li>
            <li>turnDown</li>
            <li>turnLeft</li>
            <li>turnRight</li>
            <li>uncover</li>
            <li>wipe</li>
 
            <li>zoom</li>
         </ul>
         </td>
      </tr>
      <tr>
         <td><input id="marcar" type="checkbox" checked="checked" /> <label for="marcar">Marque esta opção para ver alguns efeitos com comportamento diferente</label></td>
      </tr>
      <tr>
         <td><h3 id="effect">Clique em um efeito na lista a acima</h3></td>
      </tr>
   </table>
</div>
 
</body>
</html>

Links:
jquery.js
jquery.cycle.js

Demonstração