javascript 封裝的一個實用的焦點圖切換效果

DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> javascript 封裝的一個實用的焦點圖切換效果

編輯：關於JavaScript

所以在原來的基礎上改了下，封裝起來，並做了進一步的優化，這樣同一個頁面就可以使用多個這樣的效果了，xhtm和css沒有變化，感興趣的朋友可以在js上面可以跟之前的代碼做個對比，這樣更容易理解和掌握。
有什麼問題和建議請回帖＠＆＠
1.xhtml
復制代碼代碼如下:
<div class="jfocus">
    <div id="jfocuspic">
        <a href="#" style="display:block;">圖片一</a>
        <a href="#">圖片二</a>
        <a href="#">圖片三</a>
        <a href="#">圖片四</a>
    </div>
    <ul id="jfocusnum">
        <li class="on">1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ul>
</div>

2.css
復制代碼代碼如下:
.jfocus{width:300px;height:300px;border:#ccc 1px solid;background-color:#FFF;}#jfocuspic{FILTER: progid:DXImageTransform.Microsoft.Fade (duration=0.5,overlap=1.0 );width:300px;height:200px;overflow:hidden;}#jfocuspic a{display:none; font-size:2em; text-align:center; line-height:200px; font-weight:bold; background-color:#CCC; height:200px; cursor:pointer;}#jfocusnum li{cursor:pointer;height:50px; width:50px; line-height:50px;display:inline-block; color:#000; border:#999 1px solid; text-align:center; background-color:#CCC; float:left; margin:0 5px;}#jfocusnum li.on{color:#f00; font-weight:bold; border:#900 1px solid; font-size:14px;}

3.js
復制代碼代碼如下:
function $(id,tag){var re=(id&&typeof id!="string")?id:document.getElementById(id);if(!tag){return re;}else{return re.getElementsByTagName(tag);}}//獲取元素對象
function FocusImg(focbox,picobj,numbox,numobj,time){
var n=0;
var imglist=$(focbox,picobj);
var Num=$(numbox,numobj);
function setBg(value){for(var i=0;i<Num.length;i++) Num[i].className=(value==i)?"on":"";}//設置字母列表的樣式切換；
function plays(value){
if(document.all) $(focbox).filters[0].Apply();//濾鏡
for(i=0;i<Num.length;i++){i==value?imglist[i].style.display="block":imglist[i].style.display="none";}
if(document.all) $(focbox).filters[0].play();
}
function mouse(n){//設置鼠標經過和離開後的事件；
    for(var i=0;i<Num.length;i++){
        (function(n){
        Num[i].onmouseover=imglist[i].onmouseover=function(){clearInterval(autoStart);Mea(n);}
        Num[i].onmouseout=imglist[i].onmouseout=function(){setAuto();}
        })(i);
    }
}
function Mea(value){n=value;mouse(n);setBg(value);plays(value);}
function auto(){n++;if(n>Num.length-1)n=0;    Mea(n);}
function setAuto(){autoStart=setInterval(function(){auto();},time)}
setAuto();
}

在xhtml後調用函數，並傳入對象參數：
<script type="text/javascript">FocusImg("jfocuspic","a","jfocusnum","li",3000);</script>
完整的演示代碼:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>封裝實用的焦點圖切換效果，分離式js腳本</title> 
<style type="text/css"> 
.jfocus{width:300px;height:300px;border:#ccc 1px solid;background-color:#FFF;} 
#jfocuspic{FILTER: progid:DXImageTransform.Microsoft.Fade (duration=0.5,overlap=1.0 );width:300px;height:200px;overflow:hidden;} 
#jfocuspic a{display:none; font-size:2em; text-align:center; line-height:200px; font-weight:bold; background-color:#CCC; height:200px; cursor:pointer;} 
#jfocusnum li{cursor:pointer;height:50px; width:50px; line-height:50px;display:inline-block; color:#000; border:#999 1px solid; text-align:center; background-color:#CCC; float:left; margin:0 5px;} 
#jfocusnum li.on{color:#f00; font-weight:bold; border:#900 1px solid; font-size:14px;} 
</style> 
 
<meta name="viewport" content="width=device-width, initial-scale=1.0"></head> 
<body> 
 
 
圖片一 
圖片二 
圖片三 
圖片四 
 
<ul id="jfocusnum"> 
<li class="on">1</li> 
<li>2</li> 
<li>3</li> 
<li>4</li> 
</ul> 
 
 
</body> 
</html>

[Ctrl+A 全選注:如需引入外部Js需刷新才能執行]
更多的的縮略圖效果

上一頁:JS延遲加載(setTimeout) JS最後加載
下一頁:JavaScript.Encode手動解碼技巧

關於JavaScript

使用script的src實現跨域和類似ajax效果: 場景假如有兩個域名不同的服務器， a.com和b.com, 在b.com/b_return_js.p
parseInt parseFloat js字符串轉換數字: 方法主要有三種轉換函數、強制類型轉換、利用js變量弱類型轉換。 1. 轉換函數： js提供了par
Egret引擎開發指南之發布項目: 在Egret中，使用發布功能也非常的簡單。你只需要使用如下命令即可：egret publish He

JavaScript基礎知識 JSON基礎正則表達式關於JavaScript JavaScript技巧 jQuery入門知識 AJAX入門 JavaScript綜合知識

DIV CSS 佈局教程網

相關文章