• 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

  • 相关阅读:
    python并发编程之IO模型
    协程与concurent.furtrue实现线程池与进程池
    网络编程之线程进阶
    多线程讲解
    网络编程之进阶2
    网络编程之进阶
    网络编程之进程
    函数复习之2
    函数复习
    深克隆和浅克隆
  • 原文地址:https://www.cnblogs.com/GIScore/p/9186436.html
Copyright © 2020-2023  润新知