|
|
如何讓當前的數字導航與圖片的顯示同步？
這里有兩個區域，圖片切換區和數字導航區；分別對應著兩個循環函數；plays(value)和setBg(value)；
當圖片循環切換到第2張時，此時數字導航的當前狀態也變換到第2的位置，以此達到一種同步的效果，這里的關鍵就是給他們傳遞相同的參數value；而這個任務就交給了函數Mea(value)；
圖片應該是自動切換的，當循環顯示到最后一種圖片后，返回到第一張圖，這是用函數auto()來完成；但auto()只是做出參數n遞增循環的判斷，沒有動力支持，它也無能為力，
這時，函數setAuto()帶著setInterval()來了，它就是整個系統的引擎裝置,每隔一定時間，執行一次auto();對應著參數n也不斷的遞增變化；n又傳遞給了函數Mea(n)；
最后的交互行為，當鼠標滑過時，圖片切換區和數字導航區停留在當前狀態，別忘了函數mouse(n)，這正是它的功勞；
如此，幾個函數兄弟，分工合作，各司其職，出色的完成了這項工作；
1.html
復制代碼 代碼如下:
<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){return document.getElementById(id);}
var n=0;
var Num=$("jfocusnum").getElementsByTagName("li");
var imglist=$("jfocuspic").getElementsByTagName("a");
function setBg(value){//數字區域切換，給當前元素添加class類“on”，清除其他元素的類；
for(var i=0;i<Num.length;i++) Num[i].className=(value==i)?"on":"";
}
function plays(value){//圖片區域變換
try//try...catch 可以測試代碼中的錯誤。try 部分包含需要運行的代碼，而 catch 部分包含錯誤發生時運行的代碼。
{
with (jfocuspic)//針對于IE添加濾鏡效果；
{
filters[0].Apply();//在開始一個動態效果之前，先需要進行裝備（Apply），Apply事件用來使一種濾鏡效果生成。
for(i=0;i<Num.length;i++)i==value?children[i].style.display="block":children[i].style.display="none";
filters[0].play();//play()方法用于播放動態效果。在這之前，已經在#jfocus_pic樣式中為圖片層添加了濾鏡樣式；
}
}
catch(e)
{
for(i=0;i<Num.length;i++)
{
i==value?imglist[i].style.display="block":imglist[i].style.display="none";//使當前圖片顯示，隱藏其他圖片；
}
}
}
function mouse(n){
for(var i=0;i<Num.length;i++){
(function(n){
Num[i].onmouseover=imglist[i].onmouseover=function(){clearInterval(autoStart);Mea(n);}//鼠標經過后停止自動切換，并給函數Mea()傳遞一個當前參數n
Num[i].onmouseout=imglist[i].onmouseout=function(){setAuto();}
})(i);
}
}
function Mea(value){
n=value;
mouse();
setBg(value);
plays(value);
}
function auto(){//參數n的遞增使圖片自動輪換的關鍵；
n++;
if(n>Num.length-1)n=0;
Mea(n);
}
function setAuto(){autoStart=setInterval("auto()", 2000)}//每隔2000毫秒，便執行一次auto()函數；每執行一次，參數n便遞增1
setAuto();//調用函數
演示代碼:
[Ctrl+A 全選 注:如需引入外部Js需刷新才能執行]
行為層是由js來實現的，這里的工作只是搭建了一個簡單的骨架，如果要讓效果圖美觀些并符合設計要求，就要發揮css的強大作用了。
js編好后，下次可以重復利用，但編寫css就沒那么幸運，每次設計師都可能會做出不同風格的外觀，使你不得不重新編寫css代碼，而要實現css的精確定位并保持良好兼容性，還要使其得到最大的優化，真的不是一件簡單的事情。
JavaScript技術：實用的js 焦點圖切換效果 結構行為相分離，轉載需保留來源！
鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。
