<!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>
