JQuery animation effect image carousel effect _ jquery

This article mainly introduces jQuery animated carousel special effects. images can be rotated between left and right, which has a certain reference value. For more information, see this chapter, I will introduce how to use Jquery to complete special effect animation. Let's take a look at the special effect described in this section: Traditional carousel.

I. Requirement Analysis

1. Provide a lot of images of the same size, one row is next to the display.

2. There are two switching buttons on the left and right to control whether the previous button is displayed or the next one.

3. The indicator "small circle" is displayed in the lower right corner of the page. You can also click it to switch the image.

4. The image will automatically scroll at every fixed time.

5. When the mouse is placed on the image, auto-scroll is stopped. When the mouse leaves, it is automatically played after a fixed interval.

Ii. Code Analysis

1. Build a framework with html code

1> the p with the id of container is the container of the overall carousel effect.
2> ul with the id of content, which stores the scrolling image displayed on the interface.

3> If the id is btn, the two sub-elements are used to switch between the previous and next buttons.

4> ul whose id is indicator is used to display the indicator.

2. CSS code to change the display style

1> the following code clears the default gap between browsers.

*{margin: 0; padding: 0;} 

2> set the style of the parent container.

#container {   width:560px;   height: 300px;   margin: 100px auto;   position: relative;   overflow: hidden; } 

The size of the displayed image is 560X300, so the size of the parent container is also set so large. Here, the margin is set to align the parent container horizontally, with a vertical distance of PX from the top, overflow indicates that if the child element to be displayed exceeds the container range, it will be hidden (Note: Because the displayed image is displayed in a row, if the overflow: hidden attribute is not added, it will show up. If this attribute is removed, the effect is as follows :).

That is to say, if the overflow: Den den attribute is not added, all the images will be displayed in a row.

The last one is the position: relative property. Because the container is the parent container, it should be set to relative. If all its child elements need to be absolutely located, their position should be set to absolute. This is the so-called "sub-parent" principle. This is used in absolute positioning.

3> set the content style

#container #content {   list-style: none;   width: 10000px;   position: absolute;   left:0;   top:0; }  #container #content li {   float:left; }  #container #content li img {   border: 0; } 

Note that the width attribute of content is set to pixel Px to ensure that it can store enough images. By default, all li in content is block-level elements, that is, they are arranged up and down. Therefore, a float: left is added to arrange them left and right. The Parent-level element container sets overflow: hidden, so only the first picture can be seen in the left and right arrays.
4> set the style of the left/right switch button

#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; } 

When the left-right button is selected, icons.png is the same image. Only the positions of the captured images are inconsistent. This is the so-called "Genie ". In order to reduce the image size, many small icons are placed on an image, and the desired part is obtained by locating and capturing the image. (Note: how to locate the icon? 1. Write the code to adjust it slowly; 2. Use the sprite to crop positioning software, such as CSS Sprites ). The image design is roughly as follows:

This picture contains not only the left and right switch buttons, but also the indicator buttons. Therefore, you can also use this picture when writing the css code of the indicator button.

4> set the indicator Style

#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; } 

In the code, the image of the background set by # indicator li is a small hollow circle, and the image of the background set by # indicator li. current is a large circle of the solid heart. So at the beginning, the first one is selected by default.
3. Use JQuery to add interaction results

1> switch to the next one (click the button on the right)

$ (Function () {// The total number of images (the number is obtained using code and the scalability is strong) var totalCount = $ ("# container # content li "). length; // The number of images currently in the var nowImage = 0; $ ("# container # btn # rightBtn "). click (rightBtnClick); function rightBtnClick () {if (! $ ("# Container # content "). is (": animated") {if (nowImage = totalCount-1) {nowImage = 0; $ ("# container # indicator li "). eq (nowImage ). addClass ("current "). siblings (). removeClass ("current"); $ ("# 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")){     $("#container #content").animate({"left": -560 * nowImage}, 1000);     $("#container #indicator li").eq(nowImage).addClass("current").siblings().removeClass("current");   } } 

In the Code, when the DOM element is loaded, $ ('# container # btn # rightBtn'). click (rightClick) is executed immediately. In the rightBtnClick function, you first determine whether the content is being animated. The purpose of this function is to prevent the animation from being executed and the user from executing other animations forcibly, this will cause interference, which will eventually lead to chaotic animation effects.

If any, the flag variable nowImage is directed to the next image and the code in the changeImage function is executed: 1. move all the images in the content to the left of the width of an image. 2. move the image of the indicator to the corresponding position.

If no, and the image is displayed as the last one, execute the animation first. After the animation is executed, immediately pull all the image content in the content back to the first one, however, you can still attach an animation here because the current image is shown as the last one, and you continue to execute the animation without any effect, so there is no response during the animation execution, when the animation time is completed, the first image will suddenly appear on the interface.

Design Philosophy:To solve this problem, the solution is to append an identical image to the first image. This is the main design concept of traditional carousel. So when the image is rolled to the second to the last chapter, first execute the scroll animation, that is, scroll to the pre-prepared image that is exactly the same as the first one, it seems to be rolling to the first one, actually not. After the animation is executed, immediately pull all the images in the content back to the first one. The flowchart is as follows:

So modify the code and append the first image at the beginning of the Code.

/* Append the first li of the clone carousel to the end */$ ("# container # content li "). first (). clone (). appendTo ($ ("# container # content "));

In the rightBtnClick code, change nowImage = totalCount-1 to nowImage = totalCount-2.
2> switch to the previous one (click the button on the left)

The code is similar to clicking the button on the right.

$("#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 the indicator button to switch Images
The design idea is to obtain the image index and then call the changeImage function.

$("#container #indicator li").click(function(){   nowImage = $(this).index();   changeImage(); }); 

4> added the function of timing animation execution.
That is, the code of clicking the button on the right of the scheduled call; Add the following code:

var timer = setInterval(rightBtnClick, 2000); 

5> hover the mouse over the image and stop scrolling. Move the mouse away from the image to continue scrolling.
That is, to enable and disable the timer; Add the following code:

$("#container").mouseenter(function(){   clearInterval(timer); }).mouseleave(function(){   timer = setInterval(rightBtnClick, 2000); }); 

So far, the effect of a traditional carousel has been achieved, and we hope you can apply what you have learned.