先说说需求。要制作下图这种滚动视图。轮播图片的src包含在json数据中，对图片数量没有限制。图片的蒙版随着图片滚动。开发阶段使用一组字符串模拟JSON数据，后面展示字符串。逻辑代码基于jquery实现。

图片.png

层级

它是由三层组成的，分别是：

底层。请忽略两边的白色..
中层.png
顶层.png

简单阐述实现这种层级效果原理，设置容器position:relative;底层用于撑开容器，不改变其position;中层和顶层position:absolute;让中层和顶层覆盖到底层上面。其它css代码是一些细节调整。另外为了更方便地滚动我在中层下面又加了一个容器并设置其position:relative，所有为滚动式图创建的元素添加到这个容器。文章主要说js实现部分。

html

    <div class="col-xs-12 con  clearfix">
        <img class="bottom" src="images/caseShow/PC/底层.png">
        <div class="middle">
            <div class="con0">
            </div>
        </div>
        <img class="top" src="images/caseShow/PC/顶层.png">
    </div>  

css

    #caseShow .con
    {
        position: relative;
        width: 100%;
        padding: 0;
    }
    #caseShow .con > .middle,#caseShow .con > .top
    {
        position: absolute;
        top: 0;
        left: 0;
    }
    #caseShow .con>.top,#caseShow .con>.bottom
    {
        width: 100%;
        height: auto;
    }

    #caseShow .con>.middle
    {
        height: 100%;
        width: 100%;
        padding-top: 2.5%;
        padding-bottom: 2.5%;
        padding-right:4px ;
        padding-left:4px ;
        overflow: hidden;
    }
    #caseShow .con>.middle .con0
    {
        overflow: hidden;
        position: relative;
        width: 100%;
        height: 100%;
        padding: 0;
    }
    #caseShow .con>.middle img
    {
        height: 100%;
        width: auto;
        position: absolute;
    }
    #caseShow .con>.middle p
    {
        background-color: black;
        opacity: .7;
        filter: alpha(opacity:70);
        text-align: center;
        position: absolute;
        vertical-align: middle;
    }

js逻辑

通过JSON数据添加元素

自己写的字符串模拟从后台请求的json数据

    var jsonStr = '{"平山法院":"images/caseShow/PC/图4.png","石家庄桥西法院":"images/caseShow/PC/图3.png","藁城法院":"images/caseShow/PC/图2.png","test":"images/ab.jpg"}';

创建两个全局变量，一个用来保存所有为滚动式图创建的img，一个用来保存所有为滚动式图创建的p标签。这两个数组是后面滚动逻辑的基础。

    var imgArr = [];
    var pArr = [];

当document准备好的时候，获取json数据根据，可以看到json包含4个键值对。为每个键值对创建一个img元素和一个p元素，并把键作为p元素的文本，值作为img的路径。把元素添加到数组中。把元素添加到页面中。初始化元素在页面中的位置。完成这些后，每隔50毫秒执行一次run函数，滚动逻辑在run函数中实现。

$('document').ready(function(){
  var jso = JSON.parse(jsonStr);
  for(var i in jso)
  {
    var img = document.createElement('img');
    img.src = jso[i];
    var $img = $(img);
    imgArr.push($img);
    $('#caseShow .middle .con0').append($img);
    $img.css('left',$img.parent().width()+'px');
    var p = document.createElement('p');
    var $p = $(p);
    $p.text(i);
    pArr.push($p);
    $('#caseShow .middle .con0').append($p);
    $p.css('left',$p.parent().width()+'px');
  }
  window.setInterval(function(){run()},50);
}

run函数实现逻辑

function run()
{
    var pa = imgArr[0].parent();  //根据父元素的尺寸进行滚动逻辑，首先获取父元素
    var paWidth = pa.width();
    var paH = pa.height();
    for (var i=0;i<imgArr.length;i++) //遍历imgArr和pArr，二者装的键值对，length相同。在一个for循环遍历
    {
        if(i==0)  //如果是数组的第一个元素
        {
            var left = parseInt(imgArr[i].css('left'));  //获取图片其原来的left值
            imgArr[i].css('left',left - 3 + 'px');       //设置图片其left值为原来的left值-3
            pArr[i].width(imgArr[i].width());   
            pArr[i].height(imgArr[i].height()/8 <16 ? 16 : imgArr[i].height()/8); //p元素高度为img元素高度的1/8,至少为16px
            pArr[i].css({'left':left - 3 + 'px','top':paH - pArr[i].height() + 'px'});//p元素left和img一样，在图片底部
          }
        else  //如果是第一个元素后面的元素，则让当前元素根据上一个的位置改动，这样配合响应式布局效果比较好。
        {
            var left = parseInt(imgArr[i-1].css('left')) + imgArr[i-1].width();
            imgArr[i].css('left',left + 12 + 'px');
            pArr[i].width(imgArr[i].width());
            pArr[i].height(imgArr[i].height()/8 <16 ? 16 : imgArr[i].height()/8);
            pArr[i].css({'left':left + 12 + 'px','top':paH - pArr[i].height() + 'px'});
        }
        //这部分代码实现：当img滚动出父元素的范围，将此img元素和对应的p元素从数组0下表位置移动到数组最后面。
        var left = parseInt(imgArr[i].css('left'));  
        if(left <= -imgArr[i].width())
        {
            var a = imgArr[0];
            imgArr.push(a);
            imgArr.splice(0,1);
            var b = pArr[0];
            pArr.push(b);
            pArr.splice(0,1);
        }
    }
}

It down