jQuery image switching animation effects

Idea: I believe everyone has visited Taobao or some other websites, and there is usually a picture animation switching effect. How is it achieved? As a blogger, my skills are not very good, so I made a simple example!

First of all, there are usually two picture buttons on the picture, a left switching button and a right switching button. When we click the left switching button, the original picture will move XX pixels to the right, and then the picture to its left will will be displayed in the box, but the original picture is hidden. The principle of clicking the right switch button is similar to the left button. But if you keep clicking the same button, if the picture switching box originally only has 3 pictures, we have to make a judgment when the last picture is reached and move it back to the first or last picture. After analyzing the ideas, let’s take a look at our code:

1. HTML code

<div id="divBox">
  <div id="imgBox">
    <div class="img"><img  src="0.jpg"/ alt="jQuery image switching animation effects" ></div>
    <div class="img"><img  src="1.jpg"/ alt="jQuery image switching animation effects" ></div>
    <div class="img"><img  src="3.jpg"/ alt="jQuery image switching animation effects" ></div>
  </div>
</div>
<div id="bth">
  <button id="zou">左</button>
  <button id="you">右</button>
</div>

divBox is a box that displays pictures

imgBox is a DIV that wraps all pictures. Our effect is to move this DIV That’s it

bth put two button buttons to switch pictures

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 sets the width, height, absolute position, and border of the picture display box. Another important attribute is overflow. , overflow hiding, when the content in this DIV exceeds the size of this DIV, the overflow part will be hidden.

#imgBox Set the absolute position and width. This width depends on the total width of all your pictures. Here I am 2550px. There are three pictures, each picture is 750px wide; if the width is not given here, the small DIV inside cannot float left. .

.img is set to float left, so that all pictures float to the left and remain on a horizontal line.

#bth Set the margins. Because the div above has an absolute position, the div will be covered and invisible, so move the div out.

3. Script code

$(function(){
  //定义一个变量保存距离左边的位置
  var leftNum=0;
  $("#zou").click(function(){
    if(leftNum==0){
      //移动到最后一张图片
      $("#imgBox").animate({left:leftNum=-1500},500);
    }else{
      $("#imgBox").animate({left:leftNum=leftNum+750},500);
    }
     
  });
   
  $("#you").click(function(){
    if(leftNum==-1500){
      //移动到第一张图片
      $("#imgBox").animate({left:leftNum=0},500);
    }else{
      $("#imgBox").animate({left:leftNum=leftNum-750},500);
    }
     
  });
});

Tip: Remember to import the jQuery package

Script code I wrote two click events and defined a property leftNum that saves the distance to the left

First, take a look at our left Switch button click event: When we click the button, first determine whether leftNum is 0. If it is 0, then it is the first picture. What should we do if there is no picture on the left side of the first picture, so we let him jump to the end For a picture, we call the animate method to achieve the animation effect. Here I write left: left=-1500, why is it -1500? When left is equal to 0, it is the first picture, and when left is equal to -750, it is the second picture. For pictures, when left is equal to -1500, it is the third picture, so the position of the last picture = - (picture width) X (total number of pictures) -1. If leftNum is not 0, we will add 750px to the original value.

The principle of the right switch button is similar to that of the left switch button, so I won’t explain that much.

4. Summary:

Friends who understand it can practice it themselves, after all, practice will reveal the truth.

If you want to make a better-looking student, you can send me a private message. After all, there are other functions that I haven’t mentioned yet, such as putting a few dots on the picture. When we click on the dots, the animation will switch to the corresponding picture. You can also set the picture carousel effect and switch pictures every few seconds.

As for the buttons, you can also make them more beautiful. You can add a picture button to the left and right of the picture, which will make it more beautiful