先说说需求。要制作下图这种滚动视图。轮播图片的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
