實(shí)用的js 焦點(diǎn)圖切換效果 結(jié)構(gòu)行為相分離
更新時(shí)間:2010年06月09日 10:41:10 作者:
行為層是由js來實(shí)現(xiàn)的,這里的工作只是搭建了一個(gè)簡(jiǎn)單的骨架,如果要讓效果圖美觀些并符合設(shè)計(jì)要求,就要發(fā)揮css的強(qiá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)行的代碼。
{
with (jfocuspic)//針對(duì)于IE添加濾鏡效果;
{
filters[0].Apply();//在開始一個(gè)動(dòng)態(tài)效果之前,先需要進(jìn)行裝備(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()方法用于播放動(dòng)態(tài)效果。在這之前,已經(jīng)在#jfocus_pic樣式中為圖片層添加了濾鏡樣式;
}
}
catch(e)
{
for(i=0;i<Num.length;i++)
{
i==value?imglist[i].style.display="block":imglist[i].style.display="none";//使當(dāng)前圖片顯示,隱藏其他圖片;
}
}
}
function mouse(n){
for(var i=0;i<Num.length;i++){
(function(n){
Num[i].onmouseover=imglist[i].onmouseover=function(){clearInterval(autoStart);Mea(n);}//鼠標(biāo)經(jīng)過后停止自動(dòng)切換,并給函數(shù)Mea()傳遞一個(gè)當(dāng)前參數(shù)n
Num[i].onmouseout=imglist[i].onmouseout=function(){setAuto();}
})(i);
}
}
function Mea(value){
n=value;
mouse();
setBg(value);
plays(value);
}
function auto(){//參數(shù)n的遞增使圖片自動(dòng)輪換的關(guān)鍵;
n++;
if(n>Num.length-1)n=0;
Mea(n);
}
function setAuto(){autoStart=setInterval("auto()", 2000)}//每隔2000毫秒,便執(zhí)行一次auto()函數(shù);每執(zhí)行一次,參數(shù)n便遞增1
setAuto();//調(diào)用函數(shù)
演示代碼:
如何讓當(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
復(fù)制代碼 代碼如下:
<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
復(fù)制代碼 代碼如下:
.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
復(fù)制代碼 代碼如下:
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)行的代碼。
{
with (jfocuspic)//針對(duì)于IE添加濾鏡效果;
{
filters[0].Apply();//在開始一個(gè)動(dòng)態(tài)效果之前,先需要進(jìn)行裝備(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()方法用于播放動(dòng)態(tài)效果。在這之前,已經(jīng)在#jfocus_pic樣式中為圖片層添加了濾鏡樣式;
}
}
catch(e)
{
for(i=0;i<Num.length;i++)
{
i==value?imglist[i].style.display="block":imglist[i].style.display="none";//使當(dāng)前圖片顯示,隱藏其他圖片;
}
}
}
function mouse(n){
for(var i=0;i<Num.length;i++){
(function(n){
Num[i].onmouseover=imglist[i].onmouseover=function(){clearInterval(autoStart);Mea(n);}//鼠標(biāo)經(jīng)過后停止自動(dòng)切換,并給函數(shù)Mea()傳遞一個(gè)當(dāng)前參數(shù)n
Num[i].onmouseout=imglist[i].onmouseout=function(){setAuto();}
})(i);
}
}
function Mea(value){
n=value;
mouse();
setBg(value);
plays(value);
}
function auto(){//參數(shù)n的遞增使圖片自動(dòng)輪換的關(guān)鍵;
n++;
if(n>Num.length-1)n=0;
Mea(n);
}
function setAuto(){autoStart=setInterval("auto()", 2000)}//每隔2000毫秒,便執(zhí)行一次auto()函數(shù);每執(zhí)行一次,參數(shù)n便遞增1
setAuto();//調(diào)用函數(shù)
演示代碼:
相關(guān)文章
javascript removeChild 使用注意事項(xiàng)
removeChild的注意事項(xiàng)。大家可以參考下。2009-04-04JavaScript創(chuàng)建數(shù)組的方法詳解
這篇文章主要為大家介紹了JavaScript創(chuàng)建數(shù)組的方法,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下,希望能夠給你帶來幫助2021-12-12詳解?Map?和?WeakMap?區(qū)別以及使用場(chǎng)景
這篇文章主要介紹了詳解?Map?和?WeakMap?區(qū)別以及使用場(chǎng)景,Map本質(zhì)上是一個(gè)鍵值對(duì)的集合,WeakMap?只能將對(duì)象作為鍵名,下面來一起倆姐更多詳細(xì)內(nèi)容吧,希望這一篇文章能讓你對(duì)?Map?有更好的理解,或者能夠幫你理解?Map?和?WeakMap2022-01-01JS 實(shí)現(xiàn)Json查詢的方法實(shí)例
曾經(jīng)看過一個(gè)大牛寫的實(shí)現(xiàn)Json的一個(gè)模板類,今天突然沒事就來自己試著寫寫。還好,一些東西還記得,思路還算清晰。直接上代碼了2013-04-04前端實(shí)現(xiàn)電子簽名(web、移動(dòng)端)通用的實(shí)戰(zhàn)過程
電子簽名通俗來說就是通過技術(shù)手段實(shí)現(xiàn)在電子文檔上加載電子形式的簽名,下面這篇文章主要給大家介紹了關(guān)于前端實(shí)現(xiàn)電子簽名(web、移動(dòng)端)通用的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-12-12