Home > Developer > JavaScript
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.
Copy codeThe Code is as follows:
<Head>
<Script type = "text/javascript" src = "js/jquery-1.8.0.min.js"> </script>
<Script type = "text/javascript" src = "js/jquery. cycle. all. js"> </script>
<Link href = "style.css" rel = "stylesheet" type = "text/css">
</Head>
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:
Copy codeThe Code is as follows:
<Ul id = "goods">
<Li>
<Div class = "title"> Lenovo A3000 (8 GB/White) </div>
<Div class = "author"> entertainment tablet, mobile tablet </div>
</Li>
<Li>
<Div class = "title"> Samsung GALAXY Note III </div>
<Div class = "author"> the third-generation Samsung Note series is equipped with a 5.7 inch-inch full-HD screen (Super AMOLED ),
Resolution: 1080 P (1920*1080 pixels) </div>
</Li>
<Li>
<Div class = "title"> iPad Air </div>
<Div class = "author"> the iPad Air is slim and lightweight. With a series of improvements, we integrate the iPad Air
The size is nearly 1/4 less than that of the previous-generation iPad. Even so, when you pick it up, you will still find it still durable. </Div>
</Li>
</Ul>
Add some styles in CSS to display them on the page.
Copy codeThe 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;
}
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.
Copy codeThe Code is as follows:
$ (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.
You can modify the playback speed and animation form between two slides of the Cycle plug-in, and modify the trigger mode of the slide conversion.
Copy codeThe Code is as follows:
$ (Document). ready (function (){
$ ('# Goods'). cycle ({
Timeout: 2000,
Velocity: 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.
Among them, Cycle has a very important parameter: fx: it is used to select special effects.
Copy codeThe Code is as follows:
$ ('# Goods'). cycle ({
Fx: 'fade ',
Timeout: 2000,
Velocity: 200,
Pause: true
});
Includes the following effects: blindX, cover, curtainX, fadeZoom, growX, scrollUp, shuffle, and slideX.
Source code download
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
