HTML image (image) swipe left and right

1. Demand

A group of images needs to be displayed in a simple animation, with no fixed number of images

2, the effect is as follows:

3. Ideas

Speaking of animation, the first thought of using-webkit-transition:; Because this is the easiest to use, first put the picture on the left, and then according to the number of pictures to calculate the left margin of each picture, so you can arrange in sequence. Then you set the padding value of the div where the picture is, and the image looks layered.

Click on the "Next" when the left margin of all the pictures to increase the left margin, according to the index of the image to find the middle picture, so that its padding maintain a fixed value, Z-index maintain the maximum value. Finally, add the div-style-webkit-transition:all 0.6s property to animate the slide-scale of the picture.

4, the core code is as follows:

$ (document). Ready (function(){    varlen=10;//can be adjusted    varRightnum=1;//number of times the picture is sliding to the right    varHtml= ""; vara=230/(len-1);//left margin increment value for(vari=0;i<len;i++){      varSrc= ' img/a ' + (i+1) + ". png"; varnum=a*i; HTML+ = ' <div name= ' +i+ ' style= ' margin-left: ' +num+ ' px;padding: ' + (3*len-i*2) + ' px ' class= ' wsc-img-div ' ></div> "; }    $(". Imgs-panel"). HTML (HTML); $(". Next-btn"). On ("click",function(){//Click to show the next one        if(Rightnum!=len) Init (1);    }); $(". Previous-btn"). On ("click",function(){//Click to display the previous photo        if(rightnum!=1) Init (-1);    }); functionInit (val) {Rightnum+=Val; varImgs=document.getelementbyid ("Imgspanel");  for(vari=0;i){            varimg=Imgs.childnodes[i]; varIndex=number (img.attributes["name"].value) +val;//Index Accumulationimg.attributes["Name"].value=index; Img.style.marginLeft=index*a+ "px";//equal distance accumulation picture left margin            varNum2=math.abs (len-1-index); Img.style.zIndex= (len-num2);//Sets the overlay order of the layers, always in the middle            if(num2==0) img.style.zindex=100; Img.style.padding= (3*len-(len-num2) + *) + "px";//set the image size, the image is reduced from the middle to the side        }    }});

Attached source

Blog Address: https://www.cnblogs.com/GIScore/p/9186436.html

HTML image (image) swipe left and right