jquery Picture Switch Plugin jquery.cycle.js

cycle is a great jquery image toggle plugin that provides a great feature to help you make it easier to use the plugin's slideshow feature

To download the cycle plugin and introduce it, notice that the code that introduced it is placed after the introduction of the jquery Master file.

 Jquery.cycle.all.js is available in the demo code.
Cycle Plug-ins can act on the page regardless of the set of sibling elements.
To demonstrate this, we need a simple
An HTML document that contains a list of product covers and related information that can be added to the body of an HTML document:
<ul id= "goods" > <li>  <div class= "title" > Lenovo A3000 (8gb/White) </div> <div class= "Author" > Entertainment Tablet PC, mobile tablet </div> </li> <li>  <div class=" title "> Samsung Galaxy Note iii</div> <div class=" Author "> Samsung Note Series third-generation products with 5.7-inch Full HD Shine screen (Super AMOLED) with resolution of 1080P (1920*1080 pixels) </div> </li> <li>  <div class=" title ">ipad air</div> <div class=" Author ">iPad Air boasts an amazing ipad Air slim and lightweight. With a series of improvements, we have the ipad Air    
add some styles to the CSS and you'll be able to display them in the page.
HTML, body {  margin:0;  padding:0;} Body {  font:62.5% Verdana, Helvetica, Arial, Sans-serif;  Color: #000;  Background: #fff;} ul#goods {  list-style:none;  margin:0;  padding:0;  height:210px;  width:500px;  Overflow:hidden;} Ul#goods li {  list-style:none;  margin:0;  padding:0;  height:210px;  width:500px;  Background-color: #F79321;  Position:relative;} Ul#goods li img {  position:absolute;  left:0;  top:0;  width:300px;  height:210px;} Ul#goods li. title {  margin-left:300px;  padding:10px;  width:180px;  Font-weight:bold;  Font-size:1.2em;  Background-color: #000;  Color: #fff;  Overflow:hidden;} Ul#goods Li author {  margin-left:300px;  padding:10px 10px 0 10px;  width:180px;  Font-weight:bold;  Background-color: #F79321;  Color: #fff;}

The cycle plugin enables you to convert this list to interactive slides.
This conversion can be achieved by invoking the. cycle () method on the appropriate container in the DOM.
$ (document). Ready (function () {$ (' #goods '). cycle ();});
This grammar is simple enough to be simple.
As with other built-in jquery methods, we've also called on a jquery object that includes DOM elements.
. cycle (). Even if no number of parameters are provided. cycle () can also help us to complete the conversion work.
This includes changing the style of the page,
So that you can display only one list item at a time, and then switch to the next list item every 4 seconds in a crossfade mode.

Specifying a parameter for a plug-in method
The Cycle () method provides us with a number of references, and details of each of the parameters are not described here, please consult other documentation
We can change the playback speed and animation between the two slides of the cycle plug-in, and change the way the slide transitions are triggered.
$ (document). Ready (function () {$ (' #goods '). Cycle ({timeout:2000, speed:200, pause:true});});
The first timeout option specifies the number of milliseconds (2000) to wait between switching slides, and speed determines the number of milliseconds (200) it takes to switch itself.
When pause is set to true, the slide pauses when the mouse enters, which is useful when you include a link that you can click on the slide.
The cycle has an important part:FX: The effect is to select effects.
$ (' #goods '). Cycle ({fx: ' fade ', timeout:2000, speed:200, pause:true});

Include the following effects Blindx,cover,curtainx,fadezoom,growx,scrollup,shuffle,slidex and so on.


Demo Code: http://download.csdn.net/detail/itmyhome/7503119



jquery Picture Switch Plugin jquery.cycle.js