2015年3月18日

[教學] jQuery學習筆記 第五堂(製作最流行的圖片輪撥效果:淡入淡出效果、自動輪撥功能、輪撥停止設定、)


在第五堂課當中,我們要學習製作目前最流行的圖片輪撥方式,不同於以往透過gif的動畫呈現一張又一張的廣告,現在最常見的是在圖片的下方會出現許多的「點點」,讓你可以去選你想要看的圖片,當你不選的時候,則會自動輪轉。

這堂課中,我們會學習到許多不同的語法,像是:淡入淡出fade、位置移動position、指標修改cursor、屬性修改attr、時區設立setInterval、取消時區clearInterval、滑鼠進入mouseover、滑鼠移出mouseout。

製作出來的結果就像這樣子。
這堂課我們會學習到的語法包含:

text-indent:縮排
eq( ):選擇第幾個標籤,如a:eq(0)。

top
left
position

fadeIn( ) / fadeOut( ) / fadeToggle( ) / fadeTo( )
$( ).attr(屬性, 值)回傳或改變某個屬性(attribute)的值
setInterval / clearInterval
mouseover / mouseout
$( ).css(屬性,值 )回傳或改變某個屬性(proterty)的值
for( ){ }

讓我們來看看一些例子,首先是最近最夯的Apple Watch

再來是htc最新的M9


還有大家常看的痞客邦


有沒有注意到現在圖片都是用點點的方式在呈現呢?那麼,這樣的效果到底該怎麼製作呢?

這堂課馬老師就會教我們如何用jQuery做到這樣的效果。

學習淡入、淡出效果


首先,我們會發現,在點選「點點」的時候,圖片會有一種漸層變化的形式,這是利用到jQuery中「淡入」和「淡出」的效果,這裡我們就先來利用第三堂課(p3.html)所製作的閱讀頁面,來先感受一下淡入淡出的效果。

老師先補充了一個縮排的語法,也就是text-indent

我們上次用的是id的方式,來加入點選按鍵時的功能

這時候,我們學習一個新的用法是eq(),這裡寫a:eq(0),表示的是下面數來第一個a的設定,透過這種方式,我們就可以不用使用id

把所有的id都改成eq的用法,試試看,應該會有一樣的結果。

接下來我們就來練習淡入、淡出的寫法,我們可以到jQuery的官網看使用的方式,或者可以看W3School的說明。


把淡入淡出的方法改入原本的功能中,這時候預覽應該就會有淡入、淡出和切換的功能了

這裡還有一個是淡入至(fadeTo)的功能,我們一樣可以到jQuery的官網看如何使用這個函式


這時候預覽就可以有淡化至的功能了,但要注意的是,這裡一旦使用淡化至(fadeTo)的功能後,再次使用淡入時,原本透明度的設定都會被改變,需要再次使用fadeTo修改才能再次改變透明度的設定。

看看我們這裡製作好的成果吧!

製作點點的圖片呈現
這堂課老師要教我們製作如同華擎科技網站的圖片呈現效果,所以要先到馬老師的雲端工作室下載這堂課會用到的檔案。

製作版面
先打開一個新的html檔,檔名取做p5.html

接著我們把網頁構思成如下三個不同的區塊

用概念圖的方式來呈現,就像這樣子

用div來分配區塊

將三個區塊取名字,分別為all、products、和menu

再來撰寫各個div的css設定

首先,撰寫all的部分,all的部分我們要根據圖片的寬高來做設定,並且要置中。

接著在products和menu的網頁區塊,我們要分別插入產品圖和圓點

預覽的結果就像這樣子

因為我們總共有11個圓點,所以我們把圓點的程式碼在重複貼上10次

預覽的結果就是這樣子,但這時候,圓點還不在它該在的位置,這時候我要使用css的語法來調整圓點的位置

這裡會用到topleft還有position的指令

有用到top或left,一定要設定position,position有幾種不同的設定,更多的說明可以參考這個網站,簡單來說,staitc是預設值,fixed的用法會讓它固定在瀏覽器的某個位置,因此不管你怎麼拉動捲軸,它都不會動;relative和absolute則是會根據網頁的位置做調整,absolute是以整個網頁為主做調整,relative則是相對於它原本的位置(static)做調整。


上下左右的調整如下圖

這裡我們把圓點向上移了30px,向右移了10px。


最後就可以移到我們想要的位置上了
這時候,我們想要讓滑鼠移過小圓點的時候,就會顯示如同超連結的樣子,我們要用到cursor這個指令。關於cursor更多的指令,可以參考這裡

點選圓點更換圖片
再來我們要來做的效果是,當滑鼠點選圓點的時候,就能更換圖片,要開始寫jQuery了。
一樣的起手勢。

STEP1:針對MENU第一個小綠點寫指令



STEP 2:當我點了第一個小綠點,圖片要變成一第張圖

這裡會用到attr這個函式,它可以用來讀取html裡面的標籤,或者用來修改css的內容,它的用法是這樣的,當你想要讀取某個標籤的內容時,只要打attr(標籤)這樣子,就會回傳出該標籤的內容,例如我想要知道圖片的寬,我可以打$(img eq:(0)).attr("width"),這樣它就回傳第一張圖片的寬度給我,而如果我是想要修改圖片的寬度時則是打attr(標籤,修改後的值),也就是$(img eq:(0)).attr("width","600"),它也可以同時改變圖片的長和寬,$(img eq:(0)).attr({width: "500"; height: "600"),更詳細的示範可以參考這裡

在我們的網頁中,我們因為要修改的是圖片的路徑,所以我們的寫法是$(原本的圖片).attr(路徑,修改後的路徑),這樣的寫法。

因為我們這裡還只有三個圓點,所以重複三次就可以

現在預覽,沒有問題的話點選前三個按鍵就會有效果了

STEP 3.製作淡入淡出的效果

這裡淡入淡出的寫法要注意,如果是把淡出放在最後,則點下去之後,整個網頁就會不見了,所以淡出要放在淡入之前,程式在讀取的時候,會由上而下的讀取

這種寫法是正確的,但實際執行起來並沒有那麼順暢,會有一種先換圖片,淡出,然後才淡入的情形

為了要解決這樣的情形,我們一樣要回去看jQuery API的說明,我們會發現要用的complete這樣的說明

為了淡出之後才切換圖片和淡入,我們要新增後面的指令,也就是fadeOut(400,之後再執行的功能)

像是這樣

完成後,但是小綠點仍然不會動

STEP4. 讓小綠點隨著圖片移動



這麼寫會新增小綠點,但小綠點不會消失

這樣做就完成一半了,這時候,圖片會移動,小綠點也會移動。
製作輪撥畫面
這個部分我們要來製作自動輪撥的畫面,也就是即使我們不去點選小圓點,它也會自動輪撥。

STEP 1:設定讓圖片每隔多久切換一次
首先我們要使用setInterval這個指令,這個指令的使用說明可以參考這裡

建立auto這個函式

測試看看

如果成功的話,每隔1500ms電腦就會跳出一個視窗

STEP 2:讓圖片每個一定的時間就更換
建立一個變數,每個1500ms會加1

上面這樣的做法,會使的我們的n超過10,我們希望他不要超過10,因為我們這裡共有11張圖(0-10),因此我們加上if這個指令

alert要放在if後面,否則n會到11,跳出後n=11後才會歸零

變數和字串之間的連接要用+

STEP 3:讓綠點點每隔一段時間就更換
為了要讓綠點點也跟著動,我們要加上這段語法

另外,一開始打開網頁的時候沒有綠點點,我們要讓網頁一打開的第一個點即呈現出綠點。

只要把第一個點改成綠色的就可以了

STEP 4:讓輪撥的圖片會隨所按的按鈕而改變

但是這樣做還是會有一個問題,因為當我按下一個按鈕時,圖片的呈現還是會按照原本的輪撥,不會根據我所按的圖片,而改變輪撥的順序,因此我們必須讓上面和下面有關。

作法很簡單,只要在每個按鈕的地方加上一個n


當n=1的時候,跑到名稱為1.jpg的這張圖,然後輪撥的n也會變成1開始。
這時候,我們就可以把下面的函式往上複製就可以了。


STEP 5:讓程式碼更為簡潔

為了讓我們的程式碼更為簡潔,我們可以建立一個函式叫做change

然後把一大串程式碼都丟進去change這個函式中

上面所有長一樣的地方,都可以直接用change()取代就可以了




這麼做的話,我們的輪撥畫面就算完成了!
滑鼠移上圖片時輪撥停止,滑鼠移出時輪撥繼續
為了讓我們輪撥畫面更精美,我們要再增加一個功能,也就是滑鼠移上時輪撥停止,滑鼠移出時輪撥繼續。
這時候,我們要到clearInterval這個指令,clearInterval的用法是在取消我們已經建立好的時區,可以參考這裡
另外,我們還會用到mouseover這個指令,表示當滑鼠在圖片上方時,請執行...。


下面這段我們會用到mouseout這個指令,表示當滑鼠離開時,請執行...。
這裡是當滑鼠移開時,請重新開始計時。

最後,我們希望每次點選按鍵之後,輪撥的時間就會重頭計時,因此我們在每個點選的指令中,加入程式碼

這時候,有經驗的程式設計師應該會知道,幹麻要重複10次呢?我們直接用回圈就可以了吧!

回圈製作
一般回圈的寫法是用for(起始值;結束值;設定){}


我們一樣可以透過這樣的方式,把我們要包的函式包在內,變數和字串連接在jQuery裡用「+」,但這樣寫會碰到一個問題,就是因為i只能在最外層讀到,在進到一個新的function時就會讀不到

所以我們必須要改成這種寫法才可以把i帶進去新的一層:

製作背景圖層
眼尖的人可能會發現,圖和圖中間切換的時候,好像少了點什麼,看起來跟別人的就是不一樣,好像空白的時間太久了。

主要的原因是因為我們缺乏背景,所以我們要再把背景加進去

加進去的方法有兩種,效果都一樣。

方法一:

方法二:


寫到這裡就大功告成拉,
完整的語法如下:
<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>自動輪撥頁面</title>
    <style>
        #all{width:968px; height: 468px;  margin-left: auto; margin-right: auto;}
        #products{width:968ps; height:468px}
        #menu{top:-30px; left:10px; position:relative}
        #menu img{cursor:pointer}
    </style>
    <script src="jquery-1.11.2.min.js"></script>
    <script>
        $(document).ready(function(){
            for(i=0;i<11;i++){
                $("#menu img:eq("+i+")").click({id:i},function(e){
                    n=e.data.id
                    change()
                    clearInterval(clock)
                    clock=setInterval(auto,2000)
                })
            }
            /*$("#menu img:eq(1)").click(function(){
                n=1
                change()
                clearInterval(clock)
                clock=setInterval(auto,2000)
            })
            $("#menu img:eq(2)").click(function(){
                n=2
                change()
                clearInterval(clock)
                clock=setInterval(auto,2000)
            })
            $("#menu img:eq(3)").click(function(){
                n=3
                change()
                clearInterval(clock)
                clock=setInterval(auto,2000)
            })
            $("#menu img:eq(4)").click(function(){
                n=4
                change()
                clearInterval(clock)
                clock=setInterval(auto,2000)
            })
            $("#menu img:eq(5)").click(function(){
                n=5
                change()
                clearInterval(clock)
                clock=setInterval(auto,2000)
            })
            $("#menu img:eq(6)").click(function(){
                n=6
                change()
                clearInterval(clock)
                clock=setInterval(auto,2000)
            })
            $("#menu img:eq(7)").click(function(){
                n=7
                change()
                clearInterval(clock)
                clock=setInterval(auto,2000)
            })
            $("#menu img:eq(8)").click(function(){
                n=8
                change()
                clearInterval(clock)
                clock=setInterval(auto,2000)
            })
            $("#menu img:eq(9)").click(function(){
                n=9
                change()
                clearInterval(clock)
                clock=setInterval(auto,2000)
            })
            $("#menu img:eq(10)").click(function(){
                n=10
                change()
                clearInterval(clock)
                clock=setInterval(auto,2000)
            })*/
            n=0
            clock=setInterval(auto,2000)
            $("#products img").mouseover(function(){
                clearInterval(clock)
            })
            $("#products img").mouseout(function(){
                clock=setInterval(auto,2000)
            })
            function auto(){
                n++
                if(n>10){
                    n=0
                }
                change()
            }
            function change(){
                $("#products img").fadeOut(400,function(){
                    $("#products img").attr("src","ASRock/banner"+n+".jpg")
                    $("#products img").fadeIn()
                })
                $("#products").css("background-image","url(ASRock/banner"+n+".jpg)")
                $("#menu img").attr("src","ASRock/dot-white.png")
                $("#menu img:eq("+n+")").attr("src","ASRock/dot-green.png")
            }
        })
    </script>
</head>
<body>
<div id=all>
    <div id=products><img src="ASRock/banner0.jpg"></div>
    <div id=menu><img src="ASRock/dot-green.png"><img src="ASRock/dot-white.png"><img src="ASRock/dot-white.png"><img src="ASRock/dot-white.png"><img src="ASRock/dot-white.png"><img src="ASRock/dot-white.png"><img src="ASRock/dot-white.png"><img src="ASRock/dot-white.png"><img src="ASRock/dot-white.png"><img src="ASRock/dot-white.png"><img src="ASRock/dot-white.png"></div>
</div>


</body>
</html>


讓我們趕快來看看成果吧!

以上內容均為本人在馬老師雲端研究室學習所整理之筆記

1 則留言:

  1. Hi,
    看了你的教學,寫起來順暢多了
    可是想請問你
    我要如何讓它變成RWD的寫法?
    如果我要加上左右按鈕切換圖片
    我要如何寫指令呢?? ~"~

    回覆刪除