js实现无缝滚动图

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

js实现无缝滚动图_第1张图片
图片.png

层级

它是由三层组成的,分别是:


js实现无缝滚动图_第2张图片
底层。请忽略两边的白色..

js实现无缝滚动图_第3张图片
中层.png

js实现无缝滚动图_第4张图片
顶层.png

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

html

    

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

It down

你可能感兴趣的:(js实现无缝滚动图)