fastread homefastrread library fastread menu

jQuery : Simple jQuery Auto Image Rotator

Tutorial by:Princ      Date: 2016-04-14 03:05:59

❰ Previous Next ❱

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.

  • jQuery Image slider



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 
});
}); 

❰ Previous Next ❱


jQuery

Submit Your Thought, Tutorial, Articls etc.

Submit Your Information India's Number one online promotion website