<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>无标题文档</title> <style> *{ margin:0; padding:0;} li{ list-style:none;} #ul1{ margin:20px auto; border:1px #FFF solid; border-bottom:none; border-right:none; overflow:hidden; background-image:url(img/bg.jpg); background-size:cover;} #ul1 li{ float:left; border:1px #FFF solid; border-top:none; border-left:none; background-size:cover;} #ul1 li.active{ animation:0.5s linear infinite flash; -webkit-animation:0.5s linear infinite flash;} @keyframes flash{ 0%{ opacity:0.1;} 50%{ opacity:1;} 100%{ opacity:0.1;} } @-webkit-keyframes flash{ 0%{ opacity:0.1;} 50%{ opacity:1;} 100%{ opacity:0.1;} } </style> </head> <body> <ul id="ul1"> </ul> <script> var oUl = document.getElementById('ul1'); var aLi = oUl.getElementsByTagName('li'); var size = 8; var len = size * size; var sizeGird = 50; var row = 0; var col = 0; var min = 0; var max = size - 1; var arr = []; var bgArr = []; oUl.style.width = size * (sizeGird + 1) + 'px'; for(var i=0;i<len;i++){ var oLi = document.createElement('li'); oLi.style.width = sizeGird + 'px'; oLi.style.height = sizeGird + 'px'; oUl.appendChild(oLi); } for(var i=0;i<len;i++){ //aLi[ row * size + col ].innerHTML = i; arr.push( aLi[ row * size + col ] ); if( row == min && col < max ){ col = col + 1; } else if( col == max && row < max ){ row = row + 1; } else if( row == max && col > min ){ col = col - 1; } else if( col == min && row > min ){ row = row - 1; } if( row - 1 == min && col == min ){ min = min + 1; max = max - 1; } } /*var iNow = 0; setInterval(function(){ for(var i=0;i<aLi.length;i++){ aLi[i].style.backgroundImage = ''; } arr[iNow].style.backgroundImage = 'url(img/1.jpg)'; iNow++; },200);*/ for(var i=0;i<aLi.length;i++){ if(i%5==0){ var bgImage = 'url(img/'+ ( Math.floor(Math.random()*11+1) ) +'.jpg)'; arr[i].style.backgroundImage = bgImage; bgArr.push([i,bgImage]); } } run(); setInterval(run,1000); function run(){ for(var i=0;i<aLi.length;i++){ aLi[i].style.backgroundImage = ''; aLi[i].className = ''; } for(var i=0;i<bgArr.length;i++){ bgArr[i][0] = bgArr[i][0] + 1; if(arr[ bgArr[i][0] ]){ arr[ bgArr[i][0] ].style.backgroundImage = bgArr[i][1]; arr[ bgArr[i][0] ].className = 'active'; arr[ bgArr[i][0] ].style.animationDelay = -Math.random()*2 + 's'; arr[ bgArr[i][0] ].style.webkitAnimationDelay = -Math.random()*2 + 's'; } else{ bgArr.pop(); var bgImage = 'url(img/'+ ( Math.floor(Math.random()*11+1) ) +'.jpg)'; bgArr.unshift([0,bgImage]); } } } </script> </body> </html>