這堂課我們會學習到的語法包含：
在jQuery學習筆記 第五堂（製作最流行的圖片輪撥效果）這堂課，我們已經有製作了一種類型的廣告輪撥方式，而在今天這堂課我們則是要學習製作如同YAHOO拍賣一樣的輪撥式廣告看板
在這個看板中有幾個不同的效果：
1.當滑鼠移到上方的標題時，圖片會透過移動的方式轉到符合那張標題的圖片
2.自動輪撥
為了要學習撰寫這樣的效果，我們要先學習animate這個語法。
animate功能示範
首先，我們先利用CSS製作一個方框
長的就像這樣子
接著就可以來套用animate這個效果了，animate({"CSS屬性"："CSS的值"})
結果就會像這樣，它會從左邊和上方開始移動各100px。
在官網有寫到，如果是單純用jQuery的話，是沒辦法改變背景顏色的，需要另外下載jQuery.color的套件，才可以做到改變背景顏色，有興趣的可以在試試看。
這個部分完整的語法如下：
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>animate示範</title>
<style>
.show{
height:100px;
width:100px;
border-radius:10px;
background-color:aquamarine;
position:absolute;
}
</style>
<script src="jquery-1.11.2.min.js"></script>
<!-- <script src='jquery.color-2.1.2.min.js'></script>-->
<script>
$(document).ready(function(){
$(".show").animate({
"width":"300px",
"height":"300px",
"left":"100px",
"top":"100px",
//"background-color":"#4c67a5"
})
})
</script>
</head>
<body>
<div class="show">
</div>
</body>
</html>
可以玩玩看animate的效果：點我
製作廣告輪撥畫面
知道animate的大致用法後，我們就來模仿製作yahoo的廣告輪撥畫面了
STEP 1 版面建置
我們先分析yahoo廣告的版型，可以看出大概可以切成兩個區塊，一個區塊是是上方的選單（nav），另一個區塊是下方的廣告區（banner）
就可以開始來建立區塊（div）了
在nav的區塊中，我們用先前所學到的ul和li來把標題輸入進去
同時我們可以到yahoo拍賣，把廣告的圖片下載下來練習用，插入banner當中，雖然實際上的廣告有5張圖，但是我們先插入三張就好，之後的部分可以在用回圈來讓自己執行。
這個時候網頁的頁面會長的像這樣子
我們這時候可以設定各個區塊的css style，比較容易的方式是由下往上做，先看每一張圖片的大小（949*354），所以我們知道欄的寬應該要是949，所以nav這個區塊的寬也是949
這時候的版面會變成這樣子
再來我們要把三張圖片並排在一起，所以我們把寬度改為949*3=2847
這時候會發現，雖然我們banner設的寬度和三張圖剛剛好是一樣的，可是這三張圖並沒有並排在一起，原因是因為，我把三張圖的程式碼用enter分行，而在html中，按enter就會多一個空白
就是這個空白，使得我們三張圖沒有辦法直接併在一起
這時候，我們可以利用float這個語法，讓這三張圖之間加以並排，不要留空隙
結果就會剛剛好這三張圖可以出現在banner這個區塊中
再來我們把List變成水平排列，使用float：left這個指令
另外，我們還可以用overflow這個語法，告訴它說，如果我們其他區塊超過all的寬度時，請幫我隱藏起來。
這時候的結果就會長的像這樣
STEP 2 更多CSS語法修飾版型
這時候，我們其實可以開始寫jQuery的語法了，但我要想讓版面漂亮一下再開始寫，所以我決定先在添加一下CSS的樣式，修飾一下版型。
我先把CSS寫成如下，但最後寫上jQuery還會做一些變動，這裡我原本是用hover來做出當滑鼠移過時會有的效果，等一下我會把這部分拿掉，改用jQuery的效果.css來執行：
<style>
*{
padding:0;
margin:0;
}
#all{width:949px; height:424px; margin:auto; overflow:hidden}
.nav{width:949px; height:40px;margin-bottom: 10px; margin-top:20px; border-bottom:1px solid #07A1D4;padding-bottom:3px}
.nav li{float:left; list-style-type: none; color:darkgray; font-family:微軟正黑體; width:200px; font-size:18px; text-align:center; line-height:40px; cursor: pointer}
.nav li:hover{
font-weight:bold;
color:#0785d4;
font-size:21px;
border-bottom: 4px solid #07A1D4;
}
.banner{width:2847px; height:354px;}
.banner img{float:left}
</style>
這裡要注意的地方是，#all的高度要調整成424，因為我們在nav的地方有用到margin和padding，這會增加它的高度，所以調成424（10(margin-bottom)+20(margin-top)+354(.banner height)+40(.nav height)）
添加廣告輪撥動畫：開始寫jQuery語法
jQuery我們會用到幾個不同的語法，像是動畫（animate）、設定播放時間（setInterval）、修改樣式（css）和一些回圈的指令
STEP 1 當滑鼠移過時，移動廣告位置
寫移動的效果時，會用到animate這個語法，但要注意的是，若要用animate，前面一定要先定義position。
這裡我們用的是relative
如果用absolute，banner會出現問題，上面雖然我們有設定overflow:hidden，當是當我這裡的postion如果設定成absolute，它會以它上層的element（這裡就是指id=all）當作定位點。
寫移動的效果時，會用到animate這個語法，但要注意的是，若要用animate，前面一定要先定義position。
這裡我們用的是relative
如果用absolute，banner會出現問題，上面雖然我們有設定overflow:hidden，當是當我這裡的postion如果設定成absolute，它會以它上層的element（這裡就是指id=all）當作定位點。
接下來就可以寫入這段jQuery語法：
這段程式碼的意思是，當我的滑鼠進入（mouseenter）nav li這個區塊時，執行animate的動畫。
這裡的定位點是用relative，當left為0的時候，就是最左邊，當left為-949的時候，表示圖片會往左邊移動949px，以此類推。
記得之前的這張圖嗎？
STEP 2 讓字體根據游標位置改變
接著，我們可以把剛剛寫的.nav li:hover {}這整段CSS刪掉，讓它變成jQuery動畫的效果，這段效果分成兩段，下面那段的意思是，當我滑鼠移到的那欄，請幫我改變字體；上面那段則是用來恢復每一段變回原本的字體。
stop.() 的目的則是要避免動畫向音譜一樣抖動，也就是當滑鼠移到其他按鍵的時候，就不要再執行先前的動畫了。
STEP 3 製作自動輪撥的效果
接著要利用setInterval（函數，時間），這個語法，也就是每隔多久執行一次該函數（這裡是auto）。
然後我們先用alert(position)來測試一下我們希望呈現的數字對不對，在這裡我們希望每個3秒呈現一個數字，第一次是-949，第二次-949*2，第三次是-949*0。
如果用alert的作法沒問題的話，我們就可以把它改成輪撥的函數
接著，跟上面一樣，我們要加入CSS的效果，讓輪撥的時候，也能隨著我們輪撥到的畫面，改變字體。
STEP 4 設定當滑鼠移過圖片時，停止輪撥
我們利用hover這個指令來執行，當滑鼠移到圖片上時，我們clearInterval，當滑鼠移開圖片時，我們在setInterval。
STEP 5 讓輪撥和滑鼠移過的效果不會衝突
在上個步驟完成後，我們會發現，輪撥的效果和滑鼠移過的效果會有衝突產生，這是因為輪撥的效果和滑鼠移過的效果之間沒有關連，因此，我們要透過變數n，讓它們產生關連。
我們要在每一個效果中都增加這段語法，讓它知道當我的滑鼠移到第一張圖（eq:(0)）的時候，輪撥的效果也要變成從第1張繼續下去。同時為了避免滑鼠一移到那張圖後，就馬上輪播下一張，我們要加上clearInter和setInterval，讓它重新計時。
STEP 6 將程式碼精簡化
<script src="jquery-1.11.2.min.js"></script>
<script>
$(document).ready(function(){
$(".nav li:eq(0)").mouseenter(function(){
$(".banner").animate({"left":"0px"},400)
})
$(".nav li:eq(1)").mouseenter(function(){
$(".banner").animate({"left":"-949px"},400)
})
$(".nav li:eq(2)").mouseenter(function(){
$(".banner").animate({"left":"-1898px"},400)
})
})
</script>
這段程式碼的意思是，當我的滑鼠進入（mouseenter）nav li這個區塊時，執行animate的動畫。
這裡的定位點是用relative，當left為0的時候，就是最左邊，當left為-949的時候，表示圖片會往左邊移動949px，以此類推。
記得之前的這張圖嗎？
STEP 2 讓字體根據游標位置改變
接著，我們可以把剛剛寫的.nav li:hover {}這整段CSS刪掉，讓它變成jQuery動畫的效果，這段效果分成兩段，下面那段的意思是，當我滑鼠移到的那欄，請幫我改變字體；上面那段則是用來恢復每一段變回原本的字體。
stop.() 的目的則是要避免動畫向音譜一樣抖動，也就是當滑鼠移到其他按鍵的時候，就不要再執行先前的動畫了。
STEP 3 製作自動輪撥的效果
接著要利用setInterval（函數，時間），這個語法，也就是每隔多久執行一次該函數（這裡是auto）。
然後我們先用alert(position)來測試一下我們希望呈現的數字對不對，在這裡我們希望每個3秒呈現一個數字，第一次是-949，第二次-949*2，第三次是-949*0。
如果用alert的作法沒問題的話，我們就可以把它改成輪撥的函數
接著，跟上面一樣，我們要加入CSS的效果，讓輪撥的時候，也能隨著我們輪撥到的畫面，改變字體。
STEP 4 設定當滑鼠移過圖片時，停止輪撥
我們利用hover這個指令來執行，當滑鼠移到圖片上時，我們clearInterval，當滑鼠移開圖片時，我們在setInterval。
STEP 5 讓輪撥和滑鼠移過的效果不會衝突
在上個步驟完成後，我們會發現，輪撥的效果和滑鼠移過的效果會有衝突產生，這是因為輪撥的效果和滑鼠移過的效果之間沒有關連，因此，我們要透過變數n，讓它們產生關連。
我們要在每一個效果中都增加這段語法，讓它知道當我的滑鼠移到第一張圖（eq:(0)）的時候，輪撥的效果也要變成從第1張繼續下去。同時為了避免滑鼠一移到那張圖後，就馬上輪播下一張，我們要加上clearInter和setInterval，讓它重新計時。
STEP 6 將程式碼精簡化
最後這個部分，我們要透過函數的建立還有回圈把程式碼精簡化。
首先，我們把我們落落長的一段變成函數，把它叫做change，放在最後面
上面原本又用到這段函式的地方，就都可以用change這個函式取代
我們進一步把這三段在更精簡的一點，改成一個回圈。這裡，因為回圈的變數i無法傳到mouseenter這個功能裡面，所以我們要要寫成{id:i},function(e)，這裡的id、e都是可以自己取的變數，data則是關鍵字
再來的幾個步驟，我們試著讓我們寫的程式更簡單就可以更改他的設定，所以我們把裡面許多未來可能會更改的值都設成變數。
我們把標題（圖片）的數目取做變數num_li，這樣之後如果圖片增加的話，我們不用一個一個在改程式，它會自動幫我們判斷我們有幾張圖。
接著，為了避免以後圖片增加，我們要去修改banner這個區塊的寬度，我們就直接把style裡面banner的寬度拿掉，把它放到jQuery裡面，讓電腦自動根據我有幾張圖片（num_li）來決定banner的寬度（width_banner）
這個目的是要讓網友一點進去的時候，第一個標題就已經有hover的效果了。
再來我們也可以設定輪撥的速度，把它設成變數time，後面所有原本填3000的地方，都改成time就可以
我們在新設一個變數，是圖片寬度，這樣以後如果我們廣告圖片的寬度有改變的話，只需要調整這裡就可以了，我們把這個變數取做img_width，後面原本寫949的地方也全部要取代成img_width。
寫到這裡其實已經告一段落了，因為實際上有6張廣告圖（原本我們只放了三張），這時候我們在把剩下的兩張放進去，因為前面都已經自動設定好寬度和函式的關係，把圖片加上後，程式就會自動幫我們修改。
看看結果吧
完整的程式碼如下：
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>輪撥式廣告banner製作</title>
<style>
*{
padding:0;
margin:0;
}
#all{width:949px; height:424px; margin:auto; overflow:hidden;}
.nav{width:949px; height:40px;margin-bottom: 10px; margin-top:20px; border-bottom:1px solid #07A1D4;padding-bottom:3px}
.nav li{float:left; list-style-type: none; color:darkgray; font-family:微軟正黑體; width:150px; font-size:16px; text-align:center; line-height:40px; cursor: pointer}
.banner{height:354px; position:relative}
.banner img{float:left}
</style>
<script src="jquery-1.11.2.min.js"></script>
<script>
$(document).ready(function(){
time=3000//設定輪撥速度
img_width=949//設定圖片寬度
num_li=$(".nav li").length//根據有幾個標題來寫回圈
width_banner=num_li*img_width
$(".banner").css("width",width_banner)//根據有幾個標題來設定banner的寬度
//當滑鼠移過時，圖片移動到特定位置
for(i=0;i<num_li;i++){
$(".nav li:eq("+i+")").mouseenter({id:i},function(e){
n=e.data.id
change()
})
}
//設定輪撥函數
clock=setInterval(auto,time);
n=0
function auto(){
n++
if(n>=num_li){
n=0
}
position=-n*img_width
$(".banner").animate({"left":+position+"px"},400)
$(".nav li").css({
"font-weight":"none",
"color":"darkgray",
"font-size":"16px",
"border-bottom":"none",
})
$(".nav li:eq("+n+")").css({
"font-weight":"bold",
"color":"#0785d4",
"font-size":"19px",
"border-bottom":" 4px solid #07A1D4",
})
}
//當滑鼠移到圖案上時輪撥暫停
$(".banner img").hover(function(){clearInterval(clock)},function(){clock=setInterval(auto,time)})
//當滑鼠移到nav時，根據標題移動圖片
function change(){
clearInterval(clock)
clock=setInterval(auto,time)
position2=-n*img_width
$(".banner").stop()//讓動畫不會像音譜一樣抖動，當其他動畫開始執行時，原本已開始的動畫就停止
$(".banner").animate({"left":+position2+"px"},400)
//讓所以的清單變回原本的字體
$(".nav li").css({
"font-weight":"none",
"color":"darkgray",
"font-size":"16px",
"border-bottom":"none",
})
//讓滑鼠移到的清單改變成hover的字體
$(".nav li:eq("+n+")").css({
"font-weight":"bold",
"color":"#0785d4",
"font-size":"19px",
"border-bottom":" 4px solid #07A1D4",
})
}
})
</script>
</head>
<body>
<div id="all">
<div class="nav">
<ul>
<li style="font-weight:bold; color:#0785d4;font-size:21px;border-bottom:4px solid #07A1D4">無名小物</li>
<li>高CP值人氣機王</li>
<li>秋葉原3C</li>
<li>開工開學優惠</li>
<li>Norns</li>
<li>WL數碼達人</li>
</ul>
</div>
<div class="banner">
<img src="yahoo/banner1.jpg">
<img src="yahoo/banner2.jpg">
<img src="yahoo/banner3.jpg">
<img src="yahoo/banner4.jpg">
<img src="yahoo/banner5.jpg">
<img src="yahoo/banner6.jpg">
</div>
</div>
</body>
</html>
點我看結果
0 意見:
張貼留言