1.對焦點圖片下方進行透明處理.兼容ie6ie7ff透明效果
2.通過鼠標移動到不同的四小圖片時,通過改變圖片所處父節點id=focus_change_list的left值取得效果
3.默認下每5秒執行一次函數autoFocusChange(),來實現圖片自動變換
<!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(http://www.byzuo.cn/demo/focus_change/img/icon_arrow.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);
functionautoFocusChange(){
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><imgsrc="focus_change/img/01.jpg"alt=""/></li>
<li><imgsrc="focus_change/img/02.jpg"alt=""/></li>
<li><imgsrc="focus_change/img/03.jpg"alt=""/></li>
<li><imgsrc="focus_change/img/04.jpg"alt=""/></li>
</ul>
</div>
<divclass="focus_change_opacity"></div>
<divid="focus_change_btn">
<ul>
<liclass="current"><ahref="#"><imgsrc="focus_change/img/btn_01.jpg"alt=""/></a></li>
<li><ahref="#"><imgsrc="focus_change/img/btn_02.jpg"alt=""/></a></li>
<li><ahref="#"><imgsrc="focus_change/img/btn_03.jpg"alt=""/></a></li>
<li><ahref="#"><imgsrc="focus_change/img/btn_04.jpg"alt=""/></a></li>
</ul>
</div>
</div>
</body>
</html>
http://www.corange.cn/archives/2008/09/1585.html
更多文章、技術交流、商務合作、聯系博主
微信掃碼或搜索：z360901061
微信掃一掃加我為好友
QQ號聯系： 360901061
您的支持是博主寫作最大的動力，如果您喜歡我的文章，感覺我的文章對您有幫助，請用微信掃描下面二維碼支持博主2元、5元、10元、20元等您想捐的金額吧，狠狠點擊下面給點支持吧，站長非常感激您！手機微信長按不能支付解決辦法：請將微信支付二維碼保存到相冊，切換到微信，然后點擊微信右上角掃一掃功能，選擇支付二維碼完成支付。
【本文對您有幫助就好】元
