HTML 圖片(image) 左右輪播

1、需求

    需要用簡單動畫的形式將一組圖片進行展示，圖片數量不固定

2、效果如下:

3、思路

    說到動畫，首先想到使用-webkit-transition:;因為這個最簡單好用,首先將圖片都放在左側，然后根據圖片數量計算每個圖片的左邊距，這樣就可以依次排列了。然后就是設置圖片所在div的padding值，是圖片看起來有層次感。

   點擊"下一張"的時候，所有圖片左邊距增加固定單位左邊距，根據圖片的索引找到中間的圖片，使其padding保持固定值，z-index保持最大值。最后加上div樣式的-webkit-transition: all 0.6s屬性，使其產生圖片滑動縮放的動畫效果。

4、核心代碼如下：

$(document).ready(function(){
    var len=10; //可以調節
    var rightnum=1;//圖片向右滑動的次數
    var html="";
    var a=230/(len-1);//左邊距遞增值
    for(var i=0;i<len;i++){
      var src='img/a'+(i+1)+".png";
      var num=a*i;
      html+='<div name='+i+' style="margin-left:'+num+'px;padding:'+(3*len-i*2)+'px" class="wsc-img-div"><img height="100%" width="100%" src="'+src+'"></div>';
      
    }
    $(".imgs-panel").html(html);
    $(".next-btn").on("click",function(){ //點擊顯示下一張
        if(rightnum!=len)init(1);
    });
    $(".previous-btn").on("click",function(){ //點擊顯示上一張
        if(rightnum!=1) init(-1);
    });

    function init(val){
        rightnum+=val;
        var imgs=document.getElementById("imgsPanel");
        for(var i=0;i<imgs.childNodes.length;i++){
            var img=imgs.childNodes[i];
            var index=Number(img.attributes["name"].value)+val; //索引累加
            img.attributes["name"].value=index;
            img.style.marginLeft=index*a+"px";//等距離累加圖片的左邊距
            var num2=Math.abs(len-1-index);
            img.style.zIndex=(len-num2); //設置圖層的覆蓋順序，中間的始終在最上
            if(num2==0)img.style.zIndex=100;
            img.style.padding=(3*len-(len-num2)*2)+"px"; //設置圖片大小，圖片由中間向兩邊減小
        }
    }
});

附源碼

 博客地址：https://www.cnblogs.com/GIScore/p/9186436.html