js仿土豆网带缩略图的焦点图片切换效果实现方法
本文实例讲述了js仿土豆网带缩略图的焦点图片切换效果实现方法。分享给大家供大家参考。具体实现方法如下：
<!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>仿土豆网带缩略图的焦点图片切换效果</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:#039;text-decoration:none;}
a:hover{text-decoration:underline;}
ul,li{list-style:none;}
fieldset,img{border:none;}
em,strong,cite,th{font-style:normal;font-weight:normal;}
/*Focus_changestyle*/
#focus_change{position:relative;width:450px;height:295px;overflow:hidden;margin:20px01px60px;}
#focus_change_list{position:absolute;width:1800px;height:295px;}
#focus_change_listli{float:left;}
#focus_change_listliimg{width:450px;height:295px;}
.focus_change_opacity{position:absolute;width:450px;height:70px;top:225px;left:0;background:#000;filter:alpha(opacity=50);-moz-opacity:0.5;opacity:0.5;}
#focus_change_btn{position:absolute;width:450px;height:65px;top:225px;left:0;}
#focus_change_btnul{padding-left:5px;}
#focus_change_btnli{display:inline;float:left;margin:015px;padding-top:12px;}
#focus_change_btnliimg{width:76px;height:50px;border:2pxsolid#888;}
#focus_change_btn.current{background:url(/uploadfile/200901/1/6C164133877.gif)no-repeat37px8px;}
#focus_change_btn.currentimg{border-color:#EEE;}
</style>
<scripttype="text/javascript">
function$(id){returndocument.getElementById(id);}
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);
xpos=xpos+dist;
}
if(xpos>final_x){
vardist=Math.ceil((xpos-final_x)/10);
xpos=xpos-dist;
}
if(ypos<final_y){
vardist=Math.ceil((final_y-ypos)/10);
ypos=ypos+dist;
}
if(ypos>final_y){
vardist=Math.ceil((ypos-final_y)/10);
ypos=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(){
varfocusBtnList=$('focus_change_btn').getElementsByTagName('li');
for(vari=0;i<focusBtnList.length;i++){
focusBtnList[i].className='';
}
}
functionfocusChange(){
varfocusBtnList=$('focus_change_btn').getElementsByTagName('li');
focusBtnList[0].onmouseover=function(){
moveElement('focus_change_list',0,0,5);
classNormal()
focusBtnList[0].className='current'
}
focusBtnList[1].onmouseover=function(){
moveElement('focus_change_list',-450,0,5);
classNormal()
focusBtnList[1].className='current'
}
focusBtnList[2].onmouseover=function(){
moveElement('focus_change_list',-900,0,5);
classNormal()
focusBtnList[2].className='current'
}
focusBtnList[3].onmouseover=function(){
moveElement('focus_change_list',-1350,0,5);
classNormal()
focusBtnList[3].className='current'
}
}
setInterval('autoFocusChange()',5000);
varatuokey=false;
functionautoFocusChange(){
$('focus_change').onmouseover=function(){atuokey=true}
$('focus_change').onmouseout=function(){atuokey=false}
if(atuokey)return;
varfocusBtnList=$('focus_change_btn').getElementsByTagName('li');
for(vari=0;i<focusBtnList.length;i++){
if(focusBtnList[i].className=='current'){
varcurrentNum=i;
}
}
if(currentNum==0){
moveElement('focus_change_list',-450,0,5);
classNormal()
focusBtnList[1].className='current'
}
if(currentNum==1){
moveElement('focus_change_list',-900,0,5);
classNormal()
focusBtnList[2].className='current'
}
if(currentNum==2){
moveElement('focus_change_list',-1350,0,5);
classNormal()
focusBtnList[3].className='current'
}
if(currentNum==3){
moveElement('focus_change_list',0,0,5);
classNormal()
focusBtnList[0].className='current'
}
}
window.onload=function(){
focusChange();
}
</script>
</head>
<body>
<divid="focus_change">
<divid="focus_change_list"style="top:0;left:0;">
<ul>
<li><ahref="https://www.nhooo.com/"><imgsrc="/images/m03.jpg"alt=""/></a></li>
<li><ahref="https://www.nhooo.com/"><imgsrc="/images/m04.jpg"alt=""/></a></li>
<li><ahref="https://www.nhooo.com/"><imgsrc="/images/m09.jpg"alt=""/></a></li>
<li><ahref="https://www.nhooo.com/"><imgsrc="/images/m10.jpg"alt=""/></a></li>
</ul>
</div>
<divclass="focus_change_opacity"></div>
<divid="focus_change_btn">
<ul>
<liclass="current"><ahref="#"><imgsrc="/images/s3.jpg"alt=""/></a></li>
<li><ahref="#"><imgsrc="/images/s4.jpg"alt=""/></a></li>
<li><ahref="#"><imgsrc="/images/s9.jpg"alt=""/></a></li>
<li><ahref="#"><imgsrc="/images/s10.jpg"alt=""/></a></li>
</ul>
</div>
</div><!--focus_changeend-->
<divstyle="height:20px;background:#EEE;"></div>
</body>
</html>
希望本文所述对大家的javascript程序设计有所帮助。