text

var oBox = $$('#box');
var oPic = $$('.pic')[0];
var oList = $$('.list')[0];
var listA = $$('a',oList);
var listSpan = $$('span',oList);
var oPrev = $$('.prev')[0];
var oNext = $$('.next')[0];
var oUl = $$('ul',oPic)[0];
var aLi = $$('li',oUl);
var aImg = $$('img',oPic);
var aSpan = $$('span', oPic);


var index = 0, timer = null; //焦点图片的位置。

oPrev.onclick = function(){
  
  index --;
  index = ( index + arr.length ) % arr.length;
  
 fnMove( 'l' , 500, index );
 fnTab( index )
  
  
};

oNext.onclick = toRight;


oBox.onmouseover = function(){
  listSpan[index].style.width = '0%';
  clearInterval( timer );  
};

oBox.onmouseout = toNext;


function toRight(){
  
  index ++;
  index %= arr.length;
  
  fnMove( 'r' , -500, index );
  fnTab( index );
  
};

for( var i=0; i<arr.length; i++){

  oList.innerHTML += '<a href="javascript:;"><span></span></a>';
  
}

listA[0].className = 'focus';
//listSpan[0].style.width = '100%';


for(var i=0; i<listA.length; i++){
  
  listA[i].index = i;
  listA[i].onclick = function(){
    
    if( index == this.index )return;
    fnTab( this.index );
    
    if( index < this.index ){
    
        fnMove( 'r' , -500 , this.index );
      
    }else{
    
     fnMove( 'l' , 500 , this.index );
      
    }
    
    index = this.index;
    
  };  
  
}


function fnTab( index ){
    for(var i=0; i<listA.length; i++){
      listA[i].className = '';  
    }
    listA[index].className = 'focus';
}

function fnMove( str , target , index ){
  aLi[1].className = str;
  aImg[1].src = arr[index];
  aSpan[1].innerHTML = aTxt[index];
  
  doMove( oUl, 'left', 30, target , function(){
    aImg[0].src = arr[index];
    aSpan[0].innerHTML = aTxt[index];
    oUl.style.left = '0px';
  });
}


toNext();

function toNext(){
   var w = 0;
   clearInterval( timer );
   timer = setInterval( function(){
      w ++;
      listSpan[index].style.width = w + '%';
      
      if( w == 100 ){
        clearInterval( timer );
        listSpan[index].style.width = '0%';
        toRight();
        toNext();
      }
    }, 20);
  
}


function $$( v , p ){
    
    var type = typeof v , s;
        
    if( type == 'string' ){
        s = v.charAt();
        if( s == '#') return document.getElementById( v.substring(1) );
        if( s == '.') return (p||document).getElementsByClassName( v.substring(1) );
        return (p || document).getElementsByTagName( v );
    }
    
    if( type == 'function' ){
        window.onload = v;    
    } 
    
    return v;
    
}


function doMove(obj,attr,speed,target,endFn){

    speed = parseFloat(getStyle(obj,attr)) < target ? 
                Math.abs(speed) : -Math.abs(speed);

    clearInterval( obj.timer );
    obj.timer = setInterval(function(){

        var iCur = parseFloat(getStyle(obj,attr)) + speed;

        if( (speed > 0 && iCur >= target) || (speed < 0 && iCur <= target) ){
            iCur = target;
        }

        obj.style[attr] = iCur + 'px';

        if(iCur == target){
            clearInterval( obj.timer );
            if(typeof endFn === 'function')endFn();
        }

    },20);

}

function getStyle(obj,attr){

    if( obj.currentStyle ){
        return obj.currentStyle[attr];
    }

    return getComputedStyle(obj)[attr];

}