焦点图轮播-优快云博客

http://www.corange.cn//uploadfiles/1018_71773.jpg
 
  <!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
 <htmlxmlns="http://www.w3.org/1999/xhtml"> 
 <head> 
 <metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/> 
 <title>佐佐制造byzuo.cn---焦点图片第三季</title> 
 <styletype="text/css"> 
/*Resetstyle*/
*{margin:0;padding:0;word-break:break-all;}
body{background:#FFF;color:#333;font:12px/1.6emHelvetica,Arial,sans-serif;}
h1,h2,h3,h4,h5,h6{font-size:1em;}
a{color:#0287CA;text-decoration:none;}
a:hover{text-decoration:underline;}
ul,li{list-style:none;}
fieldset,img{border:none;}
legend{display:none;}
em,strong,cite,th{font-style:normal;font-weight:normal;}
input,textarea,select,button{font:12pxHelvetica,Arial,sans-serif;}
table{border-collapse:collapse;}
html{overflow:-moz-scrollbars-vertical;}/*AlwaysshowFirefoxscrollbar*/
/*iFocusstyle*/
#ifocus{width:525px;height:245px;margin:20px;border:1pxsolid#DEDEDE;background:#F8F8F8;}
#ifocus_pic{display:inline;position:relative;float:left;width:410px;height:225px;overflow:hidden;margin:10px0010px;}
#ifocus_piclist{position:absolute;}
#ifocus_piclistli{width:410px;height:225px;overflow:hidden;}
#ifocus_piclistimg{width:410px;height:225px;}
#ifocus_btn{display:inline;float:right;width:91px;margin:9px9px00;}
 #ifocus_btnli{width:91px;height:57px;cursor:pointer;opacity:0.5;-moz-opacity:0.5;filter:alpha(opacity=50);} 
#ifocus_btnimg{width:75px;height:45px;margin:7px0011px;}
 #ifocus_btn.current{background:url(http://www.byzuo.cn/demo/iFocus/img/ifocus_btn_bg.gif)no-repeat;opacity:1;-moz-opacity:1;filter:alpha(opacity=100);} 
 #ifocus_opdiv{position:absolute;left:0;bottom:0;width:410px;height:35px;background:#000;opacity:0.5;-moz-opacity:0.5;filter:alpha(opacity=50);} 
#ifocus_tx{position:absolute;left:8px;bottom:8px;color:#FFF;}
#ifocus_tx.normal{display:none;}
 </style> 
 <scripttype="text/javascript"> 
function$(id){returndocument.getElementById(id);}
functionaddLoadEvent(func){
 varoldonload=window.onload; 
if(typeofwindow.onload!='function'){
 window.onload=func; 
}else{
 window.onload=function(){ 
oldonload();
func();
}
}
}
functionmoveElement(elementID,final_x,final_y,interval){
if(!document.getElementById)returnfalse;
if(!document.getElementById(elementID))returnfalse;
 varelem=document.getElementById(elementID); 
if(elem.movement){
clearTimeout(elem.movement);
}
if(!elem.style.left){
 elem.style.left="0px"; 
}
if(!elem.style.top){
 elem.style.top="0px"; 
}
 varxpos=parseInt(elem.style.left); 
 varypos=parseInt(elem.style.top); 
 if(xpos==final_x&&ypos==final_y){ 
returntrue;
}
 if(xpos<final_x){ 
 vardist=Math.ceil((final_x-xpos)/10); 
 xposxpos=xpos+dist; 
}
 if(xpos>final_x){ 
 vardist=Math.ceil((xpos-final_x)/10); 
 xposxpos=xpos-dist; 
}
 if(ypos<final_y){ 
 vardist=Math.ceil((final_y-ypos)/10); 
 yposypos=ypos+dist; 
}
 if(ypos>final_y){ 
 vardist=Math.ceil((ypos-final_y)/10); 
 yposypos=ypos-dist; 
}
 elem.style.left=xpos+"px"; 
 elem.style.top=ypos+"px"; 
 varrepeat="moveElement('"+elementID+"',"+final_x+","+final_y+","+interval+")"; 
 elem.movement=setTimeout(repeat,interval); 
}
functionclassNormal(iFocusBtnID,iFocusTxID){
 variFocusBtns=$(iFocusBtnID).getElementsByTagName('li'); 
 variFocusTxs=$(iFocusTxID).getElementsByTagName('li'); 
 for(vari=0;i<iFocusBtns.length;i++){ 
 iFocusBtns[i].className='normal'; 
 iFocusTxs[i].className='normal'; 
}
}
functionclassCurrent(iFocusBtnID,iFocusTxID,n){
 variFocusBtns=$(iFocusBtnID).getElementsByTagName('li'); 
 variFocusTxs=$(iFocusTxID).getElementsByTagName('li'); 
 iFocusBtns[n].className='current'; 
 iFocusTxs[n].className='current'; 
}
functioniFocusChange(){
if(!$('ifocus'))returnfalse;
 $('ifocus').onmouseover=function(){atuokey=true}; 
 $('ifocus').onmouseout=function(){atuokey=false}; 
 variFocusBtns=$('ifocus_btn').getElementsByTagName('li'); 
 varlistLength=iFocusBtns.length; 
 iFocusBtns[0].onmouseover=function(){ 
moveElement('ifocus_piclist',0,0,5);
classNormal('ifocus_btn','ifocus_tx');
classCurrent('ifocus_btn','ifocus_tx',0);
}
 if(listLength>=2){ 
 iFocusBtns[1].onmouseover=function(){ 
moveElement('ifocus_piclist',0,-225,5);
classNormal('ifocus_btn','ifocus_tx');
classCurrent('ifocus_btn','ifocus_tx',1);
}
}
 if(listLength>=3){ 
 iFocusBtns[2].onmouseover=function(){ 
moveElement('ifocus_piclist',0,-450,5);
classNormal('ifocus_btn','ifocus_tx');
classCurrent('ifocus_btn','ifocus_tx',2);
}
}
 if(listLength>=4){ 
 iFocusBtns[3].onmouseover=function(){ 
moveElement('ifocus_piclist',0,-675,5);
classNormal('ifocus_btn','ifocus_tx');
classCurrent('ifocus_btn','ifocus_tx',3);
}
}
}
setInterval('autoiFocus()',5000);
 varatuokey=false; 
functionautoiFocus(){
if(!$('ifocus'))returnfalse;
if(atuokey)returnfalse;
 varfocusBtnList=$('ifocus_btn').getElementsByTagName('li'); 
 varlistLength=focusBtnList.length; 
 for(vari=0;i<listLength;i++){ 
 if(focusBtnList[i].className=='current')varcurrentNum=i; 
}
 if(currentNum==0&&listLength!=1){ 
moveElement('ifocus_piclist',0,-225,5);
classNormal('ifocus_btn','ifocus_tx');
classCurrent('ifocus_btn','ifocus_tx',1);
}
 if(currentNum==1&&listLength!=2){ 
moveElement('ifocus_piclist',0,-450,5);
classNormal('ifocus_btn','ifocus_tx');
classCurrent('ifocus_btn','ifocus_tx',2);
}
 if(currentNum==2&&listLength!=3){ 
moveElement('ifocus_piclist',0,-675,5);
classNormal('ifocus_btn','ifocus_tx');
classCurrent('ifocus_btn','ifocus_tx',3);
}
 if(currentNum==3){ 
moveElement('ifocus_piclist',0,0,5);
classNormal('ifocus_btn','ifocus_tx');
classCurrent('ifocus_btn','ifocus_tx',0);
}
 if(currentNum==1&&listLength==2){ 
moveElement('ifocus_piclist',0,0,5);
classNormal('ifocus_btn','ifocus_tx');
classCurrent('ifocus_btn','ifocus_tx',0);
}
 if(currentNum==2&&listLength==3){ 
moveElement('ifocus_piclist',0,0,5);
classNormal('ifocus_btn','ifocus_tx');
classCurrent('ifocus_btn','ifocus_tx',0);
}
}
addLoadEvent(iFocusChange);
 </script> 
 </head> 
 <body> 
 <divid="ifocus"> 
 <divid="ifocus_pic"> 
 <divid="ifocus_piclist"style="left:0;top:0;"> 
 <ul> 
 <li><ahref="#"><imgsrc="http://www.byzuo.cn/demo/iFocus/img/01.jpg"alt=""/></a></li> 
 <li><ahref="#"><imgsrc="http://www.byzuo.cn/demo/iFocus/img/02.jpg"alt=""/></a></li> 
 <li><ahref="#"><imgsrc="http://www.byzuo.cn/demo/iFocus/img/03.jpg"alt=""/></a></li> 
 <li><ahref="#"><imgsrc="http://www.byzuo.cn/demo/iFocus/img/04.jpg"alt=""/></a></li> 
 </ul> 
 </div> 
 <divid="ifocus_opdiv"></div> 
 <divid="ifocus_tx"> 
 <ul> 
 <liclass="current">火箭85-78马刺姚明依旧像新秀a1</li> 
 <liclass="normal">阿德尔曼：姚明进攻太犹豫火箭还有很长路要走b2</li> 
 <liclass="normal">阿联脚伤未出场卡特意外受伤网队加时险胜热队c3</li> 
 <liclass="normal">帕杜惊讶能留住郑智英媒称查尔顿升超要靠d4</li> 
 </ul> 
 </div> 
 </div> 
 <divid="ifocus_btn"> 
 <ul> 
 <liclass="current"><imgsrc="http://www.byzuo.cn/demo/iFocus/img/btn_01.jpg"alt=""/></li> 
 <liclass="normal"><imgsrc="http://www.byzuo.cn/demo/iFocus/img/btn_02.jpg"alt=""/></li> 
 <liclass="normal"><imgsrc="http://www.byzuo.cn/demo/iFocus/img/btn_03.jpg"alt=""/></li> 
 <liclass="normal"><imgsrc="http://www.byzuo.cn/demo/iFocus/img/btn_04.jpg"alt=""/></li> 
 </ul> 
 </div> 
 </div><!--ifocusend--> 
 </body> 
 </html> 
 
焦点图片轮换
