Implementation of Jquery carousel effect-jquery

This article mainly analyzes in detail the specific steps and Implementation ideas of the Jquery carousel effect implementation process, and helps you quickly implement the Jquery carousel effect, if you are interested, you can refer to carousel, which is the second implementation of jquery learning and the longest learning time. In the process of implementing carousel, I always encounter various problems. I have consulted many people and asked them too many times. Today, I dare not say that I can write a carousel immediately. I hope to record some thinking processes in a casual manner.

The first is the html structure, a simple carousel, seamless Carousel of a single image, mainly divided into three layers: p> ul> li, img images in li.

Secondly, css style: p fixed width and height, overflow: hidden; ul width is recommended to be dynamically obtained (how to get it next); I am used to floating around li, let them arrange them in sequence. Remember to clear the floating (clear: both) on ul ).

It is important to use jquery methods. The main useful methods include animate (), setInterval (), and hover (). Before writing the method, let's clear the animation logic: the picture slides from right to left in turn. When the last one is slide, the first one is displayed, so repeated.

1. Obtain the number length and width of li.

var len=$('li').length,  liWidth=$('li').width,

Because it is seamless carousel, to achieve a natural transition, we have to do something. When the picture slides to the last one, how can we naturally transition to the first one? At this time, if the first one is behind the last one, you can. Therefore, we need to append the first one after cloning to the end of li.

$ ('Li: first '). clone (). appendTo ('ul ')
2. Obtain ul's width: ul's width equals to the width of all li's plus the width of the cloned li

UlWidth = liWidth * (len + 1)
It seems that the preparations are all done. Next we will try to let him start. The first thought is the animate () method:

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

The first parameter properties is the css attribute and value object, which determines the animation effect, whether it is up or down or left or right;

The second parameter duration: the animation completion time. The default value is 400, in milliseconds;

The third parameter easing is the easing function used for animation transition. The default parameter is swing (linear, swing). This parameter is generally not used;

The fourth parameter complete is the operation performed after the animation is completed.

Our animation effect is from right to left, so we can achieve it by changing the ul's margin-left value.

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

Here, index refers to the index value of li. When the index value of li is equal to the length value of li, that is, the animation is executed to the last one, then, set ul's margin-left to 0 and li's index value to 0.

There is still a hidden danger.

Next, when the mouse leaves p, the image is automatically played. This requires hover () and setInterval ()

SetInterval () is interpreted in W3C as follows: calls a function or computation expression according to the specified period (in milliseconds. Call the function continuously until clearInterval () is called or the window is closed.

var autoPlay;$('p').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, an automatic playback function seems to be implemented, but we can also find a bug where the first frame remains for a long time. Why?

This problem was solved yesterday. When the image was executed to the last one, its index immediately changed to 0 and then it was executed twice. Therefore, in this judgment, when the index is 0, we need to add 1, index ++ to the judgment condition.

Another problem was found yesterday. There are two time periods in the carousel, one being the animation execution time and the other being the playback time. The former must be less time than the latter, the reason is that the execution sequence of js is top-down. If the time is the same or the time of the latter is smaller than the former, the animation will be played without any judgment conditions during the time difference, the carousel fails. Today, we will share the carousel effect with the left and right arrows and hover dots in the next sharing.

Complete code is attached:

  
   Carousel