The Cycle jQuery Plugin
Cycle:
In this example we will show you how to use one of the many jQuery plugins that are available. This plugin is called "Cycle" and is a wonderful tool for creating slideshow aniumations with different fade styles.
This jQuery plugin can be found at: http://jquery.malsup.com/cycle/
One of the great things about this plugin is its ease fo use. All of the "heavy lifting" has been already done for you and the plugin works very smoothly. The first thing you will need to do is to make sure that the plugin is loaded in the <head> </head> section of your HTML. The lines of code you will need is a call to the API that controls the JavaScript and a call to the jQuery plugin itself. That section of code will look something like this:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="js/cycle.js" type="text/javascript"></script>
Once you have the code in your HTML you can then begin to utilize some of the functions that are available in the Cycle plugin. For this example we will show how to use a fade and a turn-down effect. The jQuery for the Fade effect will look something like this:
<script type="text/javascript">
$(document).ready(function() {
$('#backgrounds').cycle({
fx: 'fade',
speed: 6000
});
</script>
In the section above we are using the jQuery to use a fade effect on a DIV with an ID of “backgrounds” with a speed of 6000 milliseconds, which is equivalent to 6 seconds.