實(shí)用的js 焦點(diǎn)圖切換效果 結(jié)構(gòu)行為相分離
2024-09-06 12:45:48
供稿：網(wǎng)友
焦點(diǎn)圖切換效果，對(duì)前端來說，恐怕再熟悉不過了，實(shí)現(xiàn)它的方法應(yīng)該有多種，工作當(dāng)中常用的一種，敘述如下：
如何讓當(dāng)前的數(shù)字導(dǎo)航與圖片的顯示同步？
這里有兩個(gè)區(qū)域，圖片切換區(qū)和數(shù)字導(dǎo)航區(qū)；分別對(duì)應(yīng)著兩個(gè)循環(huán)函數(shù)；plays(value)和setBg(value)；
當(dāng)圖片循環(huán)切換到第2張時(shí)，此時(shí)數(shù)字導(dǎo)航的當(dāng)前狀態(tài)也變換到第2的位置，以此達(dá)到一種同步的效果，這里的關(guān)鍵就是給他們傳遞相同的參數(shù)value；而這個(gè)任務(wù)就交給了函數(shù)Mea(value)；
圖片應(yīng)該是自動(dòng)切換的，當(dāng)循環(huán)顯示到最后一種圖片后，返回到第一張圖，這是用函數(shù)auto()來完成；但auto()只是做出參數(shù)n遞增循環(huán)的判斷，沒有動(dòng)力支持，它也無能為力，
這時(shí)，函數(shù)setAuto()帶著setInterval()來了，它就是整個(gè)系統(tǒng)的引擎裝置,每隔一定時(shí)間，執(zhí)行一次auto();對(duì)應(yīng)著參數(shù)n也不斷的遞增變化；n又傳遞給了函數(shù)Mea(n)；
最后的交互行為，當(dāng)鼠標(biāo)滑過時(shí)，圖片切換區(qū)和數(shù)字導(dǎo)航區(qū)停留在當(dāng)前狀態(tài)，別忘了函數(shù)mouse(n)，這正是它的功勞；
如此，幾個(gè)函數(shù)兄弟，分工合作，各司其職，出色的完成了這項(xiàng)工作；
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){//數(shù)字區(qū)域切換，給當(dāng)前元素添加class類“on”，清除其他元素的類；
for(var i=0;i<Num.length;i++) Num[i].className=(value==i)?"on":"";
}
function plays(value){//圖片區(qū)域變換
try//try...catch 可以測(cè)試代碼中的錯(cuò)誤。try 部分包含需要運(yùn)行的代碼，而 catch 部分包含錯(cuò)誤發(fā)生時(shí)運(yùn)行的代碼。
{
