<!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> <style> *{margin:0; padding:0; list-style:none;} .focus{width:500px; height:300px; overflow:hidden; zoom:1;} .f-l,.f-r{display:inline; height:300px; position:relative; overflow:hidden;} .f-l{float:left; width:30px;} .f-r{float:right; width:450px; background:#9F0;} .f-l li,.f-r li{text-align:center;} .f-l li{width:30px; height:100px; background:#666; line-height:100px; overflow:hidden;} .f-l li.on{background:#06C;} .f-r li{width:450px; height:300px; line-height:300px;} .f-l ul,.f-r ul{position:absolute; top:0; left:0;} </style> </head> <body> <div id="focus" class="focus"> <div class="f-l"> <ul> <li class="on">1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> </ul> </div> <div class="f-r"> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> </ul> </div> </div> <script> function getByClass(sClass,oParent){ if(document.getElementsByClassName){ return (oParent || document).getElementsByClassName(sClass); }else{ var aEle = (oParent || document).getElementsByTagName('*'); var r = []; var reg = new RegExp('\b'+sClass+'\b','i'); for(var i=0; i<aEle.length; i++){ if(reg.test(aEle[i].className)){ r.push(aEle[i]); } } return r; } } function getStyle(name,obj){ return obj.currentStyle ? obj.currentStyle[name] : getComputedStyle(obj,false)[name] ; } function startMove(obj,json,fn){ clearInterval(obj.timer); obj.timer = setInterval(function(){ var b = true; for(var name in json){ var cur = parseInt(getStyle(name,obj)); var speed = (json[name] - cur)/5; speed=speed>0 ? Math.ceil(speed) : Math.floor(speed); obj.style[name] = cur+speed+'px'; if(cur != json[name]){ b = false; } } if(b){ clearInterval(obj.timer); fn && fn(); } },30); } var oDiv = document.getElementById('focus'); var oUl1 = getByClass('f-l',oDiv)[0].getElementsByTagName('ul')[0]; var oUl2= getByClass('f-r',oDiv)[0].getElementsByTagName('ul')[0]; oUl2.innerHTML=oUl2.innerHTML+oUl2.innerHTML; oUl1.innerHTML=oUl1.innerHTML+oUl1.innerHTML; var nIndex=0; var aLi1 = oUl1.getElementsByTagName('li'); var aLi2 = oUl2.getElementsByTagName('li'); var h = aLi1[0].offsetHeight; var h2 = aLi2[0].offsetHeight; for(var i=0; i<aLi1.length; i++){ (function(i){ aLi1[i].onclick = function(){ nIndex=i; for(var j=0; j<aLi1.length; j++){ aLi1[j].className = ''; } this.className = 'on'; if(i<aLi1.length/2){ startMove(oUl2,{top:-h2*i}); startMove(oUl1,{top:-h*i}); }else{ nIndex=nIndex-aLi1.length/2; aLi1[nIndex].className = 'on'; startMove(oUl2,{top:-h2*i},function(){oUl2.style.top=-(i-aLi1.length/2)*h2+"px"}); startMove(oUl1,{top:-h*i},function(){oUl1.style.top=-(i-aLi1.length/2)*h+"px",aLi1[i].className = '';}); } }; })(i) } var timer=null; oDiv.onmouseover=function(){ clearInterval(timer) } oDiv.onmouseout=function(){ timer=setInterval(function(){ aLi1[nIndex].onclick(); console.log(nIndex) nIndex++; },1000) } oDiv.onmouseout(); </script> </body> </html>