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]; }