Simple jQuery Auto Image Rotator

Lets create a very simple jQuery image rotation script using jQuery cycle plugin. Apart from fade-in or fade-out effect you can user other transition effect provided by cycle plugin. Transition effect supported by cycle plugin are blindX, blindY, blindZ, cover, curtainX, curtainY, fade, fadeZoom, growX, growY, none, scrollUp, scrollDown, scrollLeft, scrollRight, scrollHorz, scrollVert, shuffle, slideX, slideY, toss, turnUp, turnDown, turnLeft, turnRight, uncover, wipe, zoom. You can download cycle plugin js file from here.

Change Effect:

HTML Code:

 

<ul id="slider1">
<li><img border="0" src="images/img1.jpg" width="624" height="345" /></li>
<li><img border="0" src="images/img2.jpg" width="624" height="345" /></li>
<li><img border="0" src="images/img3.jpg" width="624" height="345" /></li>
<li><img border="0" src="images/img4.jpg" width="624" height="345" /></li>
<li><img border="0" src="images/img5.jpg" width="624" height="345" /></li>
<li><img border="0" src="images/img6.jpg" width="624" height="345" /></li>
<li><img border="0" src="images/img7.jpg" width="624" height="345" /></li>
</ul>

jQuery Code

$(document).ready(function(){
$('#slider1') .cycle({
fx: 'fade', // here change effect to blindX, blindY, blindZ etc 
speed: 'slow', 
timeout: 2000 
});
});