Cycle Plugin
JQuery-tr Wiki sitesinden
| jQuery Cycle Plugin | |
|---|---|
| Lisans: | MIT, GPL |
| Gerekli jquery versiyonu: | 1.2.6 + |
| Web sitesi: | http://malsup.com/jquery/cycle/ |
| Demo Sayfası: | http://malsup.com/jquery/cycle/ |
JQuery'nin CyclePlugin kütüphanesi sayesinde resimlerimize basit ve güzel efektler verebiliriz.
Öncelikle resimlerinizi "resim" isimli bir klasörde toplayıp daha sonra sayfanıza entegre edin.Aşağıda örneğini verdim.
<div id="right" class="resim"> <img src="resim/Sunset.jpg", alt="Gunes" /> <img src="resim/Waterlilies.jpg", alt="Nilufer" /> <img src="resim/Winter.jpg", alt="Kis" /> <img src="resim/Bluehills.jpg", alt="Dag" /> </div>
Shuffle Efekti
$(document).ready(function() { $('#shuffle').cycle({ fx: 'shuffle', delay: -4000 });
Fade Efekti
$("#efect"); $('#fade').cycle({ fx: 'fade' }); });
Zoom Efekti
$('#zoom').cycle({ fx: 'zoom', sync: 0, delay: -6000 });
TurnDown Efekti
$('#turnDown').cycle({ fx: 'turnDown', delay: -6000 });
CurtainX Efekti
$('#curtainX').cycle({ fx: 'curtainX', sync: false, delay: -2000 });
ScroolRight Efekti
$('#right').cycle({ fx: 'scrollRight', speed: 300, next: '#right', timeout: 0 });
