需求
需求分析:
每个一段时间图片随机运动
并不是一个运动完再运动下一个,而是有多个图片列表延迟不同的时间再运动
实现思路:
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>