Starting with this chapter, I will introduce you to the use of jquery to complete the special effects animation. Let's take a look at the special effects described in this section: traditional carousel.
I. Demand analysis
1. Provide a number of images of equal size, one row next to the display.
2. There are two toggle buttons to control the display of the previous one or the next one.
3. The lower right has the indicator "small circle", used to hint to the first few pictures, or you can click on it, the picture of the switch.
4. Every other fixed time, the picture will automatically scroll.
5. When the mouse is placed on the top of the picture, will stop the automatic scrolling, when the mouse left, and then after a fixed interval of time, and will automatically play.
Second, the Code analysis
1. Build the frame with HTML code
<body> <div id= "container" > <ul id= "Content" > <LI&G T;<a href= "#" ></a></li> <li><a href= "#" ></a></li> <li><a href=" # "></a></ Li> <li><a href= "#" ></a></li> <li><a href = "#" ></a></li> </ul> <div id= "btn" > <div id=
"Leftbtn" ></div> <div id= "rightbtn" ></div> </div> <ul id= "indicator" > <li class= "Current" ></li> <li></li> <li></li> <li>< /li> <li></li> </ul> </div> </body>
A div with a 1> ID of container is the container for the whole carousel effect.
2> ID for the content of the UL, inside the contents of the interface is displayed above the scrolling picture.
3> ID is btn Div, the inside of the two child elements is used to toggle the previous one or the next one button.
4> ID is indicator UL, used to display indicators.
2. CSS code changes display style
1> the following two lines of code, clear out the browser default gap.
*{margin:0; padding:0;}
2> sets the style of the parent container.
#container
{
width:560px;
height:300px;
margin:100px Auto;
position:relative;
Overflow:hidden;
}
Because the size of the picture shown is 560 X 300, so the size of the parent container here is also set so large, here set the margin, is to let the parent container horizontally centered, the vertical distance from the top 100px,overflow means that if the child elements are displayed beyond the container range, it hides (Note: Because the display of the picture is a row of display, if not add Overflow:hidden this attribute, then the story, remove this attribute, the effect is as follows:).
In other words, if you do not add Overflow:hidden this attribute, all the pictures will be displayed in a row.
The last one is positioning attribute position:relative; Since container is the parent container, it should be set to relative, and all its child elements should be absolutely positioned, their position should be set to absolute. This is the so-called "son absolute father phase" principle. This is used in absolute positioning.
3> set the style of the content
#container #content
{
list-style:none;
width:10000px;
Position:absolute;
left:0;
top:0;
}
#container #content li
{
float:left;
}
#container #content li img
{
border:0;
}
Notice that the Width property of the content is set to 10000px, which is to ensure it holds enough pictures. By default, all of the Li in the content is block-level elements, which means they are arranged up and down; so add a float:left; let them align. and the parent element container set the Overflow:hidden, so these left and right pictures can only see the first one.
4> sets the style of toggle buttons
#container #leftBtn
{
position:absolute;
width:45px;
height:45px;
top:108px;
left:20px;
Background:url (images/icons.png) no-repeat 0 0;
Cursor:pointer;
}
#container #rightBtn
{
position:absolute;
width:45px;
height:45px;
top:108px;
right:20px;
Background:url (images/icons.png) no-repeat 0-45px;
Cursor:pointer;
}
Note that when you get the left and right buttons, they are taken from the same picture icons.png. Only the location of the image interception is inconsistent, this is called "Genie". is to reduce the size of the picture, and a lot of small icon placed in a picture above, and then by locating the interception method to get the desired part. (Note: about how to position icon?) 1. Write code slowly adjust; 2. The use of the wizard trim positioning software, such as: CSS sprites and so on. The design of the picture is roughly as follows:
This picture contains not only the left and right toggle buttons, but also the indicator buttons, so you can also use this image when writing the CSS code for the indicator button.
4> set the style of the indicator
#container #indicator
{
position:absolute;
right:50px;
List-style:none;
bottom:12px;
}
#container #indicator li
{
float:left;
Cursor:pointer;
margin-left:20px;
width:14px;
height:14px;
Background:url (images/icons.png) no-repeat-23px-127px;
}
#container #indicator li.current
{
background-position: -9px-125px;
}
The background image #indicator Li set in the code is the small, hollow circle in the figure above, and the background image set by the #indicator Li.current is the large, solid circle in the figure above. So at the beginning, the first one is selected by default.
3. Add interactive effects with jquery
1> Toggle the next one (click on the right button)
$ (function () {
//total number of pictures (obtained in code, extensibility is strong)
var totalcount = $ ("#container #content li"). Length;
Currently in the first few pictures
var nowimage = 0;
$ ("#container #btn #rightBtn"). Click (Rightbtnclick);
<span style= "White-space:pre" > </span>function rightbtnclick () {
if (!$ ("#container #content"). Is (": Animated")) {
if (nowimage = = totalCount-1) {
<span style= "White-space:pre" > </span> nowimage = 0;
<span style= "White-space:pre" > </span>$ ("#container #indicator li"). EQ (nowimage). addclass (" Current "). Siblings (). Removeclass (" current ");
<span style= "White-space:pre" > </span>$ ("#container #content"). Animate ({"Left": -560 * (totalcount -1)}, 1000, function () {
$ ("#container #content"). CSS ("left", 0);
});
} else {
nowimage++
; Changeimage ();}}}
);
Changeimage function
function Changeimage () {
if (!$ ("#container #content"). Is (": Animated")) {
<span style= "White-space:pre" > </span>$ ("#container #content"). Animate ({"Left": -560 * Nowimage}, 1000);
$ ("#container #indicator li"). EQ (nowimage). addclass (' current '). Siblings (). Removeclass ("current");
}
In code, when the DOM element is loaded, the $ (' #container #btn #rightBtn ') is executed. Click (RightClick), that is, immediately performed the toggle picture operation. In the Rightbtnclick function, the content is the animation of the judge, the purpose of this: to prevent the animation in the execution of the process, the user is forced to perform other animations, will have interference, resulting in chaotic animation effect.
If so, point the flag variable nowimage to the next picture and execute the code in the Changeimage function: 1. Moves all the pictures in the content to the left one picture size width; 2. The picture of the indicator is also moved to the corresponding position.
If not, and the picture is now displayed to the last one, then execute the animation first, immediately after the completion of the content of all the pictures to pull back to the first, but there will be a help, because the current picture displayed as the last, you continue to perform animation, is no effect, So there is no reaction during the execution of the animation, when the animation time is finished, it will suddenly appear in the interface of the first picture.
Design idea: to solve this problem, the solution is to append a picture to the first picture after these pictures; This is the main design idea of the traditional carousel. So when the picture rolls to the penultimate chapter, the first scrolling animation, which is scrolling to the first picture that looks exactly the same as it did, seems to be rolling to the first one, but it doesn't. After the animation is finished, immediately pull all the pictures in the content back to the first one. The flowchart is as follows:
So now modify a little bit of code and append the first picture to the beginning of the code.
/* The first li of the clone carousel is appended to the last/
$ ("#container #content li"). Appendto ($ ("#container #content").
In the Rightbtnclick code, modify nowimage = = TotalCount-1 to Nowimage = = TotalCount-2.
2> Toggle the previous one (click on the left button)
The code is similar to clicking the right button
$ ("#container #btn #leftBtn"). Click (function () {
if (!$ ("#container #content"). Is (": Animated")) {
if ( Nowimage = = 0) {
nowimage = totalCount-2;
$ ("#container #content"). CSS ("left", -560 * (totalCount-1));
$ ("#container #indicator li"). EQ (nowimage). addclass (' current '). Siblings (). Removeclass ("current");
$ ("#container #content"). Animate ({"Left": -560 * Nowimage}, 1000);
} else {
nowimage--;
Changeimage ();}}
);
3> Click on the indicator button to switch pictures
Its design idea is to get the index of the picture, and then call the Changeimage function on it.
$ ("#container #indicator li"). Click (function () {
Nowimage = $ (this). index ();
Changeimage ();
});
4> Add the ability to perform a timed animation
That is, a timed call to click on the right button code, add the following code:
5> mouse hover over the picture, stop scrolling, and continue scrolling after the mouse leaves the picture
That is, the timer is turned on and off, and the following code is added:
$ ("#container"). MouseEnter (function () {
clearinterval (timer);
}). MouseLeave (function () {
timer = setinterval (Rightbtnclick, 2000);
So far, the effect of a traditional carousel has been achieved, I hope that we can apply.
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
