jquery Image Toggle Animation special effects _jquery

Because I am lazy blogger, so the page painting is rough, but it does not matter, because I mainly talk about how to achieve the picture animation switch.

thought: Presumably everyone has visited Taobao or some other sites, there will be a picture of animation switching effect, that is how to achieve it? Bo Lord I, the technology is not very good, made a simple example!

First of all, the general picture will have two picture buttons, a left switch button a right toggle button, when we click the Left toggle button, the original picture will move xx pixel to the right, then the picture on the left of it will be displayed in the box, and the original picture is hidden, click the right button to switch the same principle as the left button. But if the same button has been the same, the original picture switch box only 3 pictures, to the last one we have to make a judgment, let it move back to the first or the last one. After the analysis of the idea, the following look at our code:

1, HTML code

<div id= "Divbox" >
  <div id= "Imgbox" >
    <div class= "img" ></div >
    <div class= "img" ></div> <div class=
    "img" ></div>
  </div>
</div>
<div id=" bth ">
  <button id=" Zou "> Left </ button>
  <button id= "You" > right </button>
</div>

Divbox is a box that shows a picture

Imgbox is to wrap all the pictures of the Div, we realize the effect is to move this div on it

BTH put two button buttons to toggle the picture.

Effect Chart:

2, CSS Code

  #divBox {
  height:315px;
  width:750px;
  Position:absolute;
  border: #000000 1px solid;
  Overflow:hidden;}

  #imgBox {
  position:absolute;
  width:2550px}
  
  . img{
  float:left;}
  
  #bth {
  margin-left:800px;}

#divBox Set the width of the picture display box, absolute position, border, and also an important attribute is overflow, overflow hidden, when the content of this div beyond the size of this div, the overflow will be hidden away.

#imgBox Set absolute position and width, this width depends on the sum of all your picture widths, I am here 2550px, there are three pictures, each picture width is 750px; If the width is not given here, the small div cannot float left.

. IMG sets the left float so that all the pictures float to the left and remain on a horizontal line.

#bth Set the outer margin because the div above has an absolute position so the div will be covered and invisible, so move this div out.

Effect Chart:

3. Script code

$ (function () {
    ///define a variable save distance to the left position
    var leftnum=0;
    $ ("#zou"). Click (function () {
      if (leftnum==0) {
        //move to Last picture
        $ ("#imgBox"). Animate ({left:leftnum=-1500}, );
      else{
        $ ("#imgBox"). Animate ({left:leftnum=leftnum+750},500);
      }
      
    );
    
    $ ("#you"). Click (function () {
      if (leftnum==-1500) {
        //move to First picture
        $ ("#imgBox"). Animate ({left:leftnum=0 },500);
      } else{
        $ ("#imgBox"). Animate ({left:leftnum=leftnum-750},500);
      }
      
    })
  ;

Tip: Remember to import the jquery package

Scripting code I wrote two click events that define a property to save distance from the left position Leftnum

First look at our left toggle button Click event: When we click the button, first judge whether the Leftnum is 0, if 0, then is the first picture, the first picture left no picture how to do, so we let him jump to the last picture, we call the Animate method to achieve animation effect, Here I write is left:left=-1500, why is-1500, left equals 0 o'clock is the first picture, left equals-750 is the second picture, left equals-1500 is the third picture, so the position of the last picture =- (Picture width) X (total pictures)-1. If the leftnum is not 0 o'clock, we will add 750px to the original base.

The right toggle button is similar to the left toggle button, and I don't explain that much.

4. Summary:

Understand the small partners can do their own to practice, after all, practice the truth.

If you want to do a better looking student, can DMS me, after all, there is the first function I did not say, such as a few dots in the picture above, when we click on the point of the animation switch to the corresponding picture, you can also set the picture carousel effect, every number of seconds to switch the picture.

There is a button, we can also make some beautiful, can be in the picture left and right add a picture of the button, so and more beautiful

The above is the entire content of this article, I hope to help you learn, but also hope that we support the cloud habitat community.