The jQuery Cycle Plugin is a slideshow plugin that supports many different types of transition effects. It supports pause-on-hover, auto-stop, auto-fit, before/after callbacks, click triggers and much more.
Requires: Javascript, jquery
Using:
Explanation:
Line 12: it means check if document is ready to apply javascript over it.
Line 13: $('#classObject') selects the object having class name classObject. # is called selector. We apply a method cycle over this class.
Line 14: fx(function/effect) is required parameter which can be defined in many ways here it is shuffle.
Line 15: shuffle is optional, if its not defined there is default value top:15px and left: width of container. Here both are defined in line 16 and 17.
Line 19: easing can only be used with easing plugin of jquery.
Line 20: delay is also required parameter, which takes time for effect for single transition in milliseconds.
Note:
Take care of the brackets people usually get it wrong.
"id" can also be used instead of class (instead of #(hash) .(dot) is used as selector).
jquery.js is required.
jquery easing plugin will make it great.
Give 3-4 div same class name, by this way there will equal number of div having slideshow of there own. Like if you need multiple slides at a time slideshow.
There are many other cool fx. You can also create custom.
There are also some other parameter apart from fx, delay etc. Take a look into the coding of jquery.cycle for other parameters.
There some great demos on the site of jQuery cycle. You can also find easing plugin on this site.