在開始之前,我們還是先看下這個所謂的幻燈片出來,到底是起著什麼樣的作用的,首先一般說到幻燈片,我們最先想到的是PPT,(不是PPTV,是powerpoint^_^),PPT的作用就很清楚瞭,它是一屏一屏的進行放映,文字較少,圖形較多,這是它的一個特點,所以我們用到幻燈片的地方也都是以圖片為主,如果是一大段的文字就應該用上一節說到的選項卡瞭。既然是圖片,就應該有很吸引人的主題,比如某某門啦,不然誰會點進去看啊,是吧,既然是很重要的內容,所以一般幻燈片在整個網站上的位置也是在最重要的地方,根據人體本能反應,打開網頁的第一視角反應,是先看網頁內容的左上角,搜索引擎也是如此,所以,這裡不能隨便放,即不可多放,也不能少放,不然就很浪費瞭,一般在這裡放上三到五個主題。扯遠瞭,要再扯回來有點困難,所以我們就轉到正題上來,總之,幻燈片即有選項卡的優點,又有它自己的特色。是個好東西就行瞭,但一個頁面,一般也隻有一個這樣的東西,就是左上角,或較上部分內容。
我們再分析幻燈片的另一個特點,它具有定時輪換的功能,在PPT裡,它還有些小動畫;上面說瞭,它很重要,但現在搜索引擎對圖片並不給力,所以我們最後在圖片上或下加上說明文字,好瞭,說瞭這麼長段文字後,我們是應該進入編寫功能的過程瞭。
本文的實例演示請點擊這裡!
首先,我們先給它進行排版,有一個容器,然後裡面放一些選項,要麼超出就隱藏,要麼隻顯示其中一個,來,我們它的dom結構:
細心的朋友可能已經發現瞭,這個結構和我們上一篇裡的選項卡簡直是一模一樣的瞭。
好,按照選項卡的功能代碼應該是這樣的:
function click1(){
var index=$(this).index();
$(".focus_tab > p.on").removeClass("on");
$(".focus_tab > p:eq("+index+")").addClass("on");
$(this).siblings(".on").removeClass("on");
$(this).addClass("on");
}
$(".sidePic li").bind('click',click1)
這次還是一樣,我們加瞭個class為on的樣式。其實如果隻是顯示隱藏,我們可以使用jquery的show()和hide()方法,所以上面的方法還可以改成這樣:
function click2(){
var index=$(this).index();
$(".focus_tab > p").hide()
$(".focus_tab > p:eq("+index+")").show();
$(this).siblings(".on").removeClass("on");
$(this).addClass("on");
}
$(".sidePic li").bind('click',click2)
接著呢,我們再給它加上鼠標滑動上去也是這樣的效果:
$(".sidePic li").bind('click',click2).bind('mouseover',click1)
再然後,我們給它加個定時器,JS裡的定時器有兩種,一種setTimeout,另一種是setInterval,它們間的區別在於,setTimeout,是隻執行一次的,setInterval是無限執行的,取消定時器分別對應的方法是clearTimeout和clearInterval,它的用法是:
setInterval(code,millisec[,"lang"])
第一個參數是要定時執行的代碼,可以是沒有名字的function(){…},也可以是函數的名字如click1;註意,這個函數名是不帶括號的,第二個參數是間隔的毫秒數,如果是setTimout就是等待執行的時間瞭,你也可以在沒執行前就clearTimeout掉,如果要用到clearInterval這類清除定時器的方法,我們還得給它賦值到一個變量裡,如下面的代碼:
var mytime;
function resetTime(){
mytime=setInterval(play,1000);
}
resetTime();
function clearTime(){
clearInterval(mytime);
}
這裡我有一個方法resetTime來定義一個無限定時器,接著馬上執行瞭這個方法,下面是一個清除這個定時器的方法,記住,我定義的變量mytime是在這些方法的外面的,這樣它的作用域才存在。我們定時執行的方法是play這方法,它要做的就是,顯示下一張圖片,如果當前是最後一張就顯示第一張。如下代碼:
var curIndex=0; //當前索引
var imgCount=$(".sidePic li").length; //圖片的總數
function play(){
curIndex++;
if(curIndex>=imgCount){
curIndex=0;
}
//console.log($("sidePic > li:eq("+curIndex+")"))
$(".sidePic > li:eq("+curIndex+")").click();
}
在第一行,我定義瞭個當前的索引號,接著算出瞭圖片的總數,這些都不是必要的,為什麼呢,因為我們還可以通過查詢出當前顯示的圖片,然後查相鄰項,但這樣我覺得不太理智,所以我在函數外定義瞭這兩個變量來保存,在play裡,我先對當前索引進行瞭加一,(++在js裡的意思就是curIndex=curIndex+1),因為執行這個函數是為下顯示下一張,所以我加瞭一,然後我判斷是否超出瞭圖片總量,如果超出瞭,就顯示第一張,這裡我用大於等於號,是因為索引是從0開始的,也就是下一次如果是curIndex=3的話,而且它的總數也是3的話,就應該顯示第一張也就是索引為0的那張,這裡試試就知道瞭。然後我在最下面觸發瞭數字點擊的方法,類似於去觸發瞭那個鼠標點擊到那個小圖標的事件。這樣,定時器就完成瞭,是不是很簡單,隻是比上篇裡的選項卡多瞭一個定時按順序執行click的方法。
好瞭,是否就完瞭呢?沒呢,你這樣一直切換我看得比較慢,看不清楚呢,我想鼠標移上去的時候就停下來,移走後就繼續輪換,這個就是在onmouseover的時候清除掉定時器,onmouseout時重置定時器瞭,剛才這兩個方法我們都有寫過瞭,就是clearTime()和resetTime()瞭。然後我們綁上事件:
$(".sidePic li").bind('click',click2).bind('mouseover',click1).bind('mouseover',clearTime).bind('mouseout',resetTime);
這樣的連寫應該並不陌生瞭,一般情況下的jquery方法,它都是返回的節點本身的jquery對象,所以我們可以連寫,這在第一篇裡有提到過瞭。好瞭,這個幻燈片就算基本成型瞭,或許有人會說,這個一點也不cool,太老土瞭點,不就顯示隱藏嗎,難道就不能像PPT那樣來點特效嗎?可以,請自己動手吧,你可以給它加個濾鏡啥的,不過隻有ie支持,當然你也可以寫些火狐也支持的窗簾效果,這樣是否代碼量有點太大瞭。自己把握吧,我這裡寫瞭下滾動顯示。不過我想留到下一篇再講。期待吧!
最後還是這篇的結束語,如果你有任何的疑問都不要來問我,請重復閱讀本文,或加入Q群70210212,本文的實例演示請點擊這裡!謝謝觀看,下次再見!
摘自 作者:田想兵 博客地址:http://www.cnblogs.com/tianxiangbing