Implementation of the Carousel effect _jquery based on jquery

Carousel is learning the second implementation of jquery, but also the longest learning time. In the process of implementation of the carousel will always encounter a variety of problems, consulted a lot of people, but also repeatedly asked over Niang. Today, also dare not bold to say, can immediately write a carousel.

Hope is through the way of essays, record some of the thinking process.

First is the HTML structure, a simple carousel, single picture seamless carousel, mainly divided into three layers: Div>ul>li,li inside the img image.

Second, the CSS style: div fixed width, overflow:hidden;ul width is recommended for dynamic access (next will say how to get); about Li I used to use floating, let them order in sequence, in the UL to remember clearly floating (Clear:both).

What is important is the jquery approach, which is primarily useful to have animate (), setinterval (), hover (). Before you write a method, clear the logic of the action: the picture loops from right to left, and when the last one is finished, the first one shows, so repeat.

1. Get the number length and width of Li

var len=$ (' Li '). Length,
liwidth=$ (' Li '). width,

Because it is a seamless carousel, to achieve a natural transition, we have to do something, when the picture slide to the last one, how the natural transition to the first, this time, if the first one on the back of the last one, it can, so we need to the first clone after append to Li's final

$ (' Li:first '). Clone (). Appendto (' ul ')

2, get the width of the UL: UL width equal to all Li width plus the width of the cloned Li

ulwidth=liwidth* (len+1)

It seems that the preparations are done, and the next step is to try to get him to move, first thinking of the Animate () method:

Animate (properties [, duration] [, easing] [, complete]),

The first parameter properties:css the properties and values of the object, determines the animation effect, is up or down or so on;

The second parameter duration: The time to complete an animation, the default is 400, the unit is milliseconds;

The third parameter easing: animation transition using the easing function, the default is Swing (linear,swing), generally do not use this parameter;

The fourth parameter complete: refers to the action that is performed after the animation is completed.

Our dynamic is from right to left, so by changing the UL Margin-left value to achieve

$ (' ul '). Animate ({
 ' marign-left ':-liwidth*index
},3000,function () {
 if (index==len) {
  index=0;
  $ (' ul '). css ({' margin-left ': ' 0px '})
 } 

Where index refers to the index of Li, when the index of Li is equal to Li's length value, that is, animation execution to the last one, then directly let the UL Margin-left for the 0,li index value is also 0.

This also has a hidden danger, temporarily does not mention.

Next, when the mouse leaves the Div, the picture plays automatically. This is to be used to hover () and setinterval ()

SetInterval () is explained in the view of the consortium: calls the function or calculation expression in the specified period (in milliseconds). Call the function continuously until the clearinterval () is called or the window is closed.

var AutoPlay;
$ (' div '). Hover (function () {
 clearinterval (autoplay); 
},function () {
 autoplay=setinterval (function () {

$ (' ul '). Animate ({

' marign-left ':-liwidth*index
},3000,function () {
 if (index==len) {
  index=0 ;
  $ (' ul '). css ({' margin-left ': ' 0px '});
index++
 } 
});
},3000 
}). Trigger (' MouseLeave ');

In this way, a function of AutoPlay seems to be achieved, but we can also find a bug, the first frame to stay in the time seems to be a little long, why?

This problem was solved yesterday, when the picture was executed to the last one, his index immediately changed to 0 and then executed two times, so in this judgment, we need to have the index 0 o'clock, let it be 1,index++, and put it under the judgment condition.

There is another problem, which was discovered yesterday, there are two of times in this carousel, one is the animation execution time, one is the playback time, the former time must be smaller than the latter time, the reason is JS execution order is top-down, if the time is consistent or the latter time is less than the former, then, in this jet lag, The animation will not enter the judgment conditions, will always play, then the carousel failed. Share here today, next time sharing plus left and right arrows and hover round points.

Enclose the complete code:

The above is the entire content of this article, I hope to help you learn.