[教學] 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的語法來調整圓點的位置

這裡會用到top、left還有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>

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

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