jQuery image switching plug-in jquery.cycle.js usage example_jquery

Cycle is a great jQuery image switching plug-in. It provides very good functions to help you use the plug-in's slideshow function more easily

Download the cycle plug-in and import it. At this time, pay attention to the code that introduces it. After introducing the jQuery main file.

Copy code The code is as follows:

jquery.cycle.all.js is in the demo code.

The Cycle plug-in can act on any group of sibling elements in the page. To demonstrate this, we need a simple

HTML document. The document is a list containing product covers and related information, which can be added to the body of the HTML document:

Copy code The code is as follows:

• 
  < ;img src="img/lenovopad.jpg" alt="lenove pad" />
  
  Lenovo A3000(8GB/White)
  
  Entertainment tablet, mobile phone tablet

Samsung GALAXY Note III

The third generation product of Samsung Note series , equipped with a 5.7-inch full HD dazzling screen (Super AMOLED),
resolution is 1080P (1920*1080 pixels)

< ;img src="img/ipadair.png" alt="ipadair" />

iPad Air

by nearly a quarter compared to the previous generation iPad. However, when you pick it up, you will still find that it is still sturdy and durable.

Add some styles to CSS and it will be displayed on the page

Copy code The code is as follows:

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

This list can be converted into an interactive slideshow through the Cycle plug-in. This conversion can be accomplished by calling the .cycle() method on the appropriate container in the DOM.

Copy code The code is as follows:

$(document).ready(function() {
$('#goods').cycle();
});

This syntax couldn’t be simpler. As before using other built-in jQuery methods, we also called

.cycle() on a jQuery object containing a DOM element. Even if no parameters are provided, .cycle() can help us complete the conversion work. This includes modifying the style of the page,

so that only one list item is displayed at a time, and then switching to the next list item in a cross-fade manner every 4 seconds, as shown in the figure

Specify parameters for the plug-in method

The Cycle() method provides us with a lot of parameters. The specific functions of each parameter are not described one by one here. Please check other documents

us You can modify the playback speed and animation form between the two slides of the Cycle plug-in, and modify the triggering method of the slide change.

Copy code The code is as follows:

$(document).ready(function() {
$('#goods').cycle({
timeout: 2000,
speed: 200,
pause: true
});
});

The first timeout option is used to specify the number of milliseconds to wait between switching slides (2000), while speed determines the number of milliseconds it takes to switch itself (200).

With pause set to true, the slideshow will pause when the mouse enters, which is very useful when the slideshow contains clickable links.

Cycle has a very important parameter: fx: its function is to select special effects.

Copy code The code is as follows:

$('#goods').cycle({
fx:'fade',
timeout: 2000,
speed: 200,
pause: true
});

Includes the following special effects blindX, cover, curtainX, fadeZoom, growX, scrollUp, shuffle, slideX and so on.

Source code download