|
|
有什么問題和建議請回帖 ＠＆＠
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){//設置鼠標經(jīng)過和離開后的事件；
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后調(diào)用函數(shù)，并傳入對象參數(shù)：
<script type="text/Javascript">FocusImg("jfocuspic","a","jfocusnum","li",3000);</script>
完整的演示代碼:
[Ctrl+A 全選 注:如需引入外部Js需刷新才能執(zhí)行]
更多的的縮略圖效果
JavaScript技術：javascript 封裝的一個實用的焦點圖切換效果，轉(zhuǎn)載需保留來源！
鄭重聲明：本文版權歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯(lián)系我們修改或刪除，多謝。
