随机图片滚动 【总结】

需求

 

 

需求分析：

每个一段时间图片随机运动

并不是一个运动完再运动下一个，而是有多个图片列表延迟不同的时间再运动

实现思路：

1.图片列表我用js生成再插入，图片数据和href数据放在json里再把json放再数组里

2.每个一段时间执行定时器绑定doMove函数，实现随机运动的要点就是，定时器的延迟时间不一样

3.每次执行绑定之前判断当前图片列表位置是否到头，如果到头就归回原位

难点：

无

难点解决方案：

无

涉及的新知识：

无

用json存数据

优化方向：

图片的参数是我手动写进js里的，后期学ajax要让它自动获得。

备注：

 

 

(function(){

    var oWrap = $('wrap');

    //8个图片列表
    var imgArr = [
        [
            {'imgSrc':'img/1.jpg','tHref':'http://www.baidu.com'},
            {'imgSrc':'img/2.jpg','tHref':'http://www.baidu.com'}
        ],
        [
            {'imgSrc':'img/5.jpg','tHref':'http://www.baidu.com'},
            {'imgSrc':'img/4.jpg','tHref':'http://www.baidu.com'},
            {'imgSrc':'img/1.jpg','tHref':'http://www.baidu.com'}
        ],
        [
            {'imgSrc':'img/5.jpg','tHref':'http://www.baidu.com'},
            {'imgSrc':'img/6.jpg','tHref':'http://www.baidu.com'},
            {'imgSrc':'img/7.jpg','tHref':'http://www.baidu.com'},
            {'imgSrc':'img/8.jpg','tHref':'http://www.baidu.com'},
            {'imgSrc':'img/9.jpg','tHref':'http://www.baidu.com'}
        ],
        [
            {'imgSrc':'img/1.jpg','tHref':'http://www.baidu.com'},
            {'imgSrc':'img/2.jpg','tHref':'http://www.baidu.com'},
            {'imgSrc':'img/3.jpg','tHref':'http://www.baidu.com'},
            {'imgSrc':'img/4.jpg','tHref':'http://www.baidu.com'},
            {'imgSrc':'img/5.jpg','tHref':'http://www.baidu.com'}
        ],
        [
            {'imgSrc':'img/2.jpg','tHref':'http://www.baidu.com'},
            {'imgSrc':'img/3.jpg','tHref':'http://www.baidu.com'},
            {'imgSrc':'img/4.jpg','tHref':'http://www.baidu.com'},
            {'imgSrc':'img/5.jpg','tHref':'http://www.baidu.com'},
            {'imgSrc':'img/6.jpg','tHref':'http://www.baidu.com'}
        ],
        [
            {'imgSrc':'img/7.jpg','tHref':'http://www.baidu.com'},
            {'imgSrc':'img/8.jpg','tHref':'http://www.baidu.com'},
            {'imgSrc':'img/9.jpg','tHref':'http://www.baidu.com'},
            {'imgSrc':'img/10.jpg','tHref':'http://www.baidu.com'},
            {'imgSrc':'img/1.jpg','tHref':'http://www.baidu.com'}
        ],
        [
            {'imgSrc':'img/1.jpg','tHref':'http://www.baidu.com'},
            {'imgSrc':'img/2.jpg','tHref':'http://www.baidu.com'},
            {'imgSrc':'img/3.jpg','tHref':'http://www.baidu.com'},
            {'imgSrc':'img/4.jpg','tHref':'http://www.baidu.com'},
            {'imgSrc':'img/5.jpg','tHref':'http://www.baidu.com'}
        ],
        [
            {'imgSrc':'img/5.jpg','tHref':'http://www.baidu.com'},
            {'imgSrc':'img/4.jpg','tHref':'http://www.baidu.com'},
            {'imgSrc':'img/3.jpg','tHref':'http://www.baidu.com'},
            {'imgSrc':'img/2.jpg','tHref':'http://www.baidu.com'},
            {'imgSrc':'img/1.jpg','tHref':'http://www.baidu.com'}
        ],
        [
            {'imgSrc':'img/1.jpg','tHref':'http://www.baidu.com'},
            {'imgSrc':'img/2.jpg','tHref':'http://www.baidu.com'},
            {'imgSrc':'img/3.jpg','tHref':'http://www.baidu.com'},
            {'imgSrc':'img/4.jpg','tHref':'http://www.baidu.com'},
            {'imgSrc':'img/5.jpg','tHref':'http://www.baidu.com'}
        ],
        [
            {'imgSrc':'img/5.jpg','tHref':'http://www.baidu.com'},
            {'imgSrc':'img/4.jpg','tHref':'http://www.baidu.com'},
            {'imgSrc':'img/3.jpg','tHref':'http://www.baidu.com'},
            {'imgSrc':'img/2.jpg','tHref':'http://www.baidu.com'},
            {'imgSrc':'img/1.jpg','tHref':'http://www.baidu.com'}
        ]
    ]
    var imgSrcLen = imgArr.length;

    /*
        eA存放每个图片标签
        eAs存放一个图片列表的标签<a></a><a></a><a></a><a></a>...
        eDiv用来套住一个图片列表的标签<div><a></a><a></a><a></a><a></a>...</div>
        eDivs用来存放所有图片列表<div><a></a><a></a><a></a><a></a>...</div>......
        最后写进oWrap里
    */

    var eDiv = null,
        eDivs = '',
        eImg = null,
        eA = '',
        eAs = '';


    for( var i=0; i<imgSrcLen; i++ ){
        eAs = ''
        for( var j=0,len = imgArr[i].length; j<len; j++ ){
            eA = '<a href='+ imgArr[i][j].tHref +'><img src='+ imgArr[i][j].imgSrc +'></a>';
            eAs += eA;
        }

        eDiv = '<div class="barWrap"><div class="bar">'+ eAs +'</div></div>';
        eDivs += eDiv;
    }
    oWrap.innerHTML += eDivs;


})();




(function executeFn(){

/*
    oDiv是每个图片列表
    tRandom产生随机时间

    每个一段时间给所有的图片列表重新添加定时器，并且这些定时器的执行时间是随机的
    每次for都要获取当前图片列表的图片数，和当前图片列表的top值，如果top值到头了就重头开始

*/

    var oDiv = $class('div','bar'),
        oDivLen = oDiv.length;
        tRandom = null,
        doDiv = null,
        oldDiv = null;

    setTimeout(function timeFn(){


        for(var i=0; i<oDivLen; i++){
            doDiv = oDiv[i];
            doDiv.aA = doDiv.getElementsByTagName('a').length;
            doDiv.tTop = parseInt( getStyle( doDiv,'top' ) ) - 50;
            if( doDiv.tTop <= -50*doDiv.aA ){ doDiv.tTop = 0 }
            if( oldDiv == doDiv ){ break; }

            tRandom = Math.floor( Math.random()*2000+100 );
            doMove( oDiv[i],'top',5,doDiv.tTop,tRandom,30 );

        }



        oldDiv = doDiv;

        setTimeout(timeFn,4000);
    },1000);





})();

 

 

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>

<style>
    
#wrap{ width: 260px; background: #999; margin: 100px auto; }
.barWrap{ width: 120px; height: 50px; float: left; margin: 5px; position: relative; overflow: hidden; }
.bar{ position: absolute; top: 0; }
.bar a{ float: left; }
.bar a,.bar img{ width: 120px; height: 50px; }


.clear{ zoom: 1; }
.clear:after{ content: ''; display: block; clear: both; vertical-align: middle; }

</style>

</head>
<body>




<div class="clear" id="wrap">
    
</div>





<script src="getId.js"></script>
<script src="doMove.js"></script>
<script src="main.js"></script>

</body>
</html>

 

来源：https://www.cnblogs.com/mflnhg/p/9489703.html