JQuery image switch plug in jquery.cycle.js using example
- 2020-03-30 03:23:30
- OfStack
Cycle is a great jQuery image toggle plugin that provides great functionality to make it easier to use the plugin's slideshow functionality
Download the cycle plug-in and bring it in. At this point, notice that the code that brought it in is put behind the jQuery main file.
Jquery. Cycle. all.js is available in the demo code.
The Cycle plug-in can act on any set of peer elements in the page. To show this, we need a simple one
HTML document, which is a list of product covers and related information, can be added to the body of the HTML document:
Add some styles to your CSS and you're ready to display them on the page
The Cycle plug-in transforms this list into interactive slides. This transformation is accomplished by calling the.cycle() method on the appropriate container in the DOM.
This syntax could not be simpler. As with the other built-in jQuery methods, we called them on a jQuery object that contains DOM elements
Cycle (). Even if no parameter.cycle() is provided, it can help us complete the transformation. This includes changing the style of the page,
To display only one list item at a time, then switch to the next list item every 4 seconds by crossing in and out, as shown
< img SRC = "border = 0 / / files.jb51.net/file_images/article/201406/20140616160447.jpeg? 20145161658 ">
Specify parameters for the plug-in method
The Cycle() method provides us with many parameters, and the specific role of each parameter is not described here. Please refer to other documents
We can modify the speed and animation form between two slides of the Cycle plug-in, and modify the trigger mode of slide transformation.
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 to switch itself (200).
With pause set to true, the slide pauses when the mouse enters, which is useful if the slide contains a link that can be clicked.
Cycle has a very important parameter: fx: to select special effects.
Includes the following effects blindX, cover, curtainX fadeZoom, growX, scrollUp, shuffle, slideX and so on.
(link: http://xiazai.jb51.net/201406/yuanma/Cycle_jb51.net.zip)
Download the cycle plug-in and bring it in. At this point, notice that the code that brought it in is put behind the jQuery main file.
<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 available in the demo code.
The Cycle plug-in can act on any set of peer elements in the page. To show this, we need a simple one
HTML document, which is a list of product covers and related information, can be added to the body of the HTML document:
<ul id="goods">
<li>
<img src="img/lenovopad.jpg" alt="lenove pad" />
<div class="title"> lenovo A3000(8GB/ white )</div>
<div class="author"> Entertainment tablet , Mobile tablet </div>
</li>
<li>
<img src="img/note3.jpg" alt="note3" />
<div class="title"> samsung GALAXY Note III</div>
<div class="author"> samsung Note The third generation of the series , Equipped with 5.7 It's a full inch screen (Super AMOLED),
A resolution of 1080P(1920*1080 pixel )</div>
</li>
<li>
<img src="img/ipadair.png" alt="ipadair" />
<div class="title">iPad Air</div>
<div class="author">iPad Air Have amazing iPad Air Thin and light. Through a series of improvements , We will be iPad Air
Volume over the previous generation iPad It's reduced by almost a quarter . In spite of this , When you pick it up , You will still find it durable. </div>
</li>
</ul>
Add some styles to your CSS and you're ready 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 transforms this list into interactive slides. This transformation is accomplished by calling the.cycle() method on the appropriate container in the DOM.
$(document).ready(function() {
$('#goods').cycle();
});
This syntax could not be simpler. As with the other built-in jQuery methods, we called them on a jQuery object that contains DOM elements
Cycle (). Even if no parameter.cycle() is provided, it can help us complete the transformation. This includes changing the style of the page,
To display only one list item at a time, then switch to the next list item every 4 seconds by crossing in and out, as shown
< img SRC = "border = 0 / / files.jb51.net/file_images/article/201406/20140616160447.jpeg? 20145161658 ">
Specify parameters for the plug-in method
The Cycle() method provides us with many parameters, and the specific role of each parameter is not described here. Please refer to other documents
We can modify the speed and animation form between two slides of the Cycle plug-in, and modify the trigger mode of slide transformation.
$(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 to switch itself (200).
With pause set to true, the slide pauses when the mouse enters, which is useful if the slide contains a link that can be clicked.
Cycle has a very important parameter: fx: to select special effects.
$('#goods').cycle({
fx:'fade',
timeout: 2000,
speed: 200,
pause: true
});
Includes the following effects blindX, cover, curtainX fadeZoom, growX, scrollUp, shuffle, slideX and so on.
(link: http://xiazai.jb51.net/201406/yuanma/Cycle_jb51.net.zip)