Cycle is a great jquery image switching plugin that offers very good features to help you use the plugin's slideshow function more simply
Download the cycle plugin and introduce it, now note that the code that introduces it is placed after the introduction of the jquery Master file.
Copy Code code as follows:
<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" >
Jquery.cycle.all.js is in the demo code.
The cycle plug-in can be used for any set of sibling elements in a page. To show this, we need a simple
An HTML document that contains a list of product cover pages and related information that can be added to the body of an HTML document:
Copy Code code as follows:
<ul id= "Goods" >
<li>
<div class= "title" > Lenovo A3000 (8gb/White) </div>
<div class= "Author" > Entertainment Tablet PC, mobile phone Tablet PC </div>
</li>
<li>
<div class= "title" > Samsung Galaxy Note iii</div>
The third generation of the <div class= "Author" > Samsung note series, featuring a 5.7-inch Full HD Dazzle screen (Super AMOLED),
Resolution 1080P (1920*1080 pixels) </div>
</li>
<li>
<div class= "title" >ipad air</div>
<div class= "Author" >ipad Air boasts an amazing iPad air slim lightweight. Through a series of improvements, we will be the ipad Air
is nearly one-fourth smaller than the previous ipad. Still, when you pick it up, you'll still find it still rugged. </div>
</li>
</ul>
Add some styles to the CSS and you can show them on the page.
Copy Code code 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 allows you to convert this list into a slide that you can interact with. This conversion can be achieved by invoking the. cycle () method on the appropriate container in the DOM.
Copy Code code as follows:
$ (document). Ready (function () {
$ (' #goods '). cycle ();
});
The grammar is too simple to be easy. As with the other built-in jquery methods, we also called a jquery object that contains a DOM element
. cycle (). Even if no arguments are provided. cycle () can also help us complete the conversion work. This includes modifying the style of the page,
To display only one list item at a time, and then switch to the next list item every 4 seconds in a cross fade, as shown in
Specifying parameters for a plug-in method
Cycle () method provides us with a lot of parameters, the specific role of each parameter is not described here, please consult other documents
We can modify the playback speed and animation form between the two slides of the cycle plugin, and modify the trigger mode of the slide transformation.
Copy Code code as follows:
$ (document). Ready (function () {
$ (' #goods '). Cycle ({
timeout:2000,
SPEED:200,
Pause:true
});
});
The first timeout option specifies the number of milliseconds (2000) to wait between toggle slides, and speed determines the number of milliseconds (200) to spend on the switch itself.
When the pause is set to true, the slide pauses when the mouse enters, which is useful when the slides contain links that you can click.
One of the most important parameters of cycle: Fx: The effect is to select effects.
Copy Code code as follows:
$ (' #goods '). Cycle ({
FX: ' Fade ',
timeout:2000,
SPEED:200,
Pause:true
});
Including the following special effects Blindx,cover,curtainx,fadezoom,growx,scrollup,shuffle,slidex and so on.
SOURCE download
