JQuery image switching plug-in jquery. cycle. js

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

Download and introduce the cycle plug-in. At this time, note that the Code to introduce it is placed after the jQuery main file is introduced.

<script type="text/javascript" src="js/jquery-1.8.0.min.js"></script><script type="text/javascript" src="js/jquery.cycle.all.js"></script>
  

Jquery. cycle. all. js is included in the Demo code.

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

An HTML document contains a list of product covers and related information. It can be added to the subject of an HTML document:

 
 
 
  
  
Lenovo A3000 (8 GB/White) Entertainment tablet, mobile phone Tablet
 
  
  
Samsung GALAXY Note III is the third-generation product of the Samsung Note series. It is equipped with a 5.7 inch Full HD screen (Super AMOLED) with a resolution of 1080 P (1920*1080 pixels)
 
  
  
IPad Air has amazing iPad Air slim and lightweight. With a series of improvements, we have reduced the size of the iPad Air by nearly 1/4 compared to the previous iPad. Even so, when you pick it up, you will still find it still durable.
 
 
 
 

Add some styles in CSS to display them on 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 plug-in can be used to convert the list into interactive slides. Call the. cycle () method on the appropriate container in the DOM to implement this conversion.

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

This syntax is as simple as it is. Like using other built-in jQuery methods, we also called

. Cycle (). The conversion can be completed even if no parameter. cycle () is provided. This includes modifying the page style,

So that only one list item is displayed at a time, and then the item is switched to the next list item every 4 seconds,

Specify parameters for the plug-in method

The Cycle () method provides many parameters. The specific functions of each parameter are not described here. Please refer to other documents. <喎?http: www.bkjia.com kf ware vc " target="_blank" class="keylink"> Release + 7rdDOyr0s0N64xLvDtcbGrLHku7u1xLSlt6K3vcq9oaM8L3A + PHA + PC9wPjxwcmUgY2xhc3M9 "brush: java;" >$ (document ). ready (function () {$ ('# goods '). cycle ({timeout: 2000, speed: 200, pause: true });});The first timeout option is used to specify the number of milliseconds (2000) to wait for switching between slides, and speed determines the number of milliseconds (200) to switch ).

When pause is set to true, the slide stops playing when you move the mouse over it, which is useful when the slide contains links that can be clicked.

Cycle has an important parameter:Fx: Select special effects.

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

Includes the following effects: blindX, cover, curtainX, fadeZoom, growX, scrollUp, shuffle, and slideX.

DEMO code: http://download.csdn.net/detail/itmyhome/7503119