Class 02 (2015.07.20)
學習重點：圖片顯示切換程式
動物大觀 (javascript)- ------ 實作練習 ------------------
- 實作0：先設計網頁
- 實作1：程式複習 (第一張圖會換)
- 實作2：把程式定義在head區段，建立function
- 實作3：傳入 function 參數；變數使用；條件判斷句型
- ------ 變化擴充 ------------------
- 實作4：加入按鈕，上一張及下一張
- 實作5：定時輪播
**************************************************************************
實作0~1
先將10張圖片以及顯示的大圖設計完成，並且滑鼠移到小圖上，下方的大圖會跟著變換
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 | <!DOCTYPE html> <html> <head> <Meta Charset="utf-8"> <title> ANIMAL </title> </head> <body> <h1>動物大觀</h1> <p> <img src="images_s/01.jpg" onmouseover="document.getElementById('picture').src='images_b/01.jpg';"/> <img src="images_s/02.jpg" onmouseover="document.getElementById('picture').src='images_b/02.jpg';"/> <img src="images_s/03.jpg" onmouseover="document.getElementById('picture').src='images_b/03.jpg';"/> <img src="images_s/04.jpg" onmouseover="document.getElementById('picture').src='images_b/04.jpg';"/> <img src="images_s/05.jpg" onmouseover="document.getElementById('picture').src='images_b/05.jpg';"/><br/> <!--圖片中間不要有空格的話，就不要斷行--> <img src="images_s/06.jpg" onmouseover="document.getElementById('picture').src='images_b/06.jpg';"/><img src="images_s/07.jpg" onmouseover="document.getElementById('picture').src='images_b/07.jpg';"/><img src="images_s/08.jpg" onmouseover="document.getElementById('picture').src='images_b/08.jpg';"/><img src="images_s/09.jpg" onmouseover="document.getElementById('picture').src='images_b/09.jpg';"/><img src="images_s/10.jpg" onmouseover="document.getElementById('picture').src='images_b/10.jpg';"/> </p> <p> <img id="picture" src="images_b/default.jpg"/></p> </body> </html> |
實作2
把更換圖片的程式改用JavaScript，在<head></head>範圍中增加<script></script>，並將函式寫在其中
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 | <!DOCTYPE html> <html> <head> <Meta Charset="utf-8"> <title> ANIMAL </title> <script> function change(s) { switch(s){ case 0://預設 document.getElementById('picture').src='images_b/default.jpg'; break; case 1: document.getElementById('picture').src='images_b/01.jpg'; break; case 2: document.getElementById('picture').src='images_b/02.jpg'; break; case 3: document.getElementById('picture').src='images_b/03.jpg'; break; case 4: document.getElementById('picture').src='images_b/04.jpg'; break; case 5: document.getElementById('picture').src='images_b/05.jpg'; break; case 6: document.getElementById('picture').src='images_b/06.jpg'; break; case 7: document.getElementById('picture').src='images_b/07.jpg'; break; case 8: document.getElementById('picture').src='images_b/08.jpg'; break; case 9: document.getElementById('picture').src='images_b/09.jpg'; break; case 10: document.getElementById('picture').src='images_b/10.jpg'; break; default: document.getElementById('picture').src='images_b/default.jpg'; break; } } </script> </head> <body> <h1>動物大觀</h1> <p> <img src="images_s/01.jpg" onmouseover="change(1);"/> <img src="images_s/02.jpg" onmouseover="change(2);"/> <img src="images_s/03.jpg" onmouseover="change(3);"/> <img src="images_s/04.jpg" onmouseover="change(4);"/> <img src="images_s/05.jpg" onmouseover="change(5);"/><br/> <!--圖片中間不要有空格的話，就不要斷行--> <img src="images_s/06.jpg" onmouseover="change(6);"/> <img src="images_s/07.jpg" onmouseover="change(7);"/> <img src="images_s/08.jpg" onmouseover="change(8);"/> <img src="images_s/09.jpg" onmouseover="change(9);"/> <img src="images_s/10.jpg" onmouseover="change(10);"/> </p> <p> <img id="picture" src="images_b/default.jpg"/></p> </body> </html> |
實作3
將重複的語法改由變數替換
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 | <!DOCTYPE html> <html> <head> <Meta Charset="utf-8"> <title> ANIMAL </title> <script> function change(s) { var pic='';//更換圖檔名稱 switch(s) { case 0://預設 pic='images_b/default.jpg'; break; case 1: pic='images_b/01.jpg'; break; case 2: pic='images_b/02.jpg'; break; case 3: pic='images_b/03.jpg'; break; case 4: pic='images_b/04.jpg'; break; case 5: pic='images_b/05.jpg'; break; case 6: pic='images_b/06.jpg'; break; case 7: pic='images_b/07.jpg'; break; case 8: pic='images_b/08.jpg'; break; case 9: pic='images_b/09.jpg'; break; case 10: pic='images_b/10.jpg'; break; default: pic='images_b/default.jpg'; break; } var obj=document.getElementById('picture');//將更換的語法設為變數obj obj.src=pic;//將要更換的圖檔名設定為pic } </script> </head> <body> <h1>動物大觀</h1> <p> <img src="images_s/01.jpg" onmouseover="change(1);"/> <img src="images_s/02.jpg" onmouseover="change(2);"/> <img src="images_s/03.jpg" onmouseover="change(3);"/> <img src="images_s/04.jpg" onmouseover="change(4);"/> <img src="images_s/05.jpg" onmouseover="change(5);"/><br/> <!--圖片中間不要有空格的話，就不要斷行--> <img src="images_s/06.jpg" onmouseover="change(6);"/> <img src="images_s/07.jpg" onmouseover="change(7);"/> <img src="images_s/08.jpg" onmouseover="change(8);"/> <img src="images_s/09.jpg" onmouseover="change(9);"/> <img src="images_s/10.jpg" onmouseover="change(10);"/> </p> <p> <img id="picture" src="images_b/default.jpg"/></p> </body> </html> |
實作4：加入按鈕，上一張及下一張
網頁增加兩個按鈕，設定全域變數，讓change(s)回傳至全域變數，在針對全域變數做張數切換
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 | <!DOCTYPE html> <html> <head> <Meta Charset="utf-8"> <title> ANIMAL </title> <script> var corr=0;//全域變數 var total=11;//全部圖檔的數量 function change(s) { var pic='';//更換圖檔名稱 corr=s;//取得目前該圖片的圖檔 switch(s) { case 0://預設 pic='images_b/default.jpg'; break; case 1: pic='images_b/01.jpg'; break; case 2: pic='images_b/02.jpg'; break; case 3: pic='images_b/03.jpg'; break; case 4: pic='images_b/04.jpg'; break; case 5: pic='images_b/05.jpg'; break; case 6: pic='images_b/06.jpg'; break; case 7: pic='images_b/07.jpg'; break; case 8: pic='images_b/08.jpg'; break; case 9: pic='images_b/09.jpg'; break; case 10: pic='images_b/10.jpg'; break; default: pic='images_b/default.jpg'; break; } var obj=document.getElementById('picture');//將更換的語法設為變數obj obj.src=pic;//將要更換的圖檔名設定為pic } function next() { corr = (corr+1) % total;//使用取餘數的方式，當corr+1>total，返回初始張 change(corr); } function prev() { corr= (corr-1+total) % total;//先加total在取餘數，使其不會變成負數 change(corr); } </script> </head> <body> <h1>動物大觀</h1> <p> <img src="images_s/01.jpg" onmouseover="change(1);"/> <img src="images_s/02.jpg" onmouseover="change(2);"/> <img src="images_s/03.jpg" onmouseover="change(3);"/> <img src="images_s/04.jpg" onmouseover="change(4);"/> <img src="images_s/05.jpg" onmouseover="change(5);"/><br/> <!--圖片中間不要有空格的話，就不要斷行--> <img src="images_s/06.jpg" onmouseover="change(6);"/> <img src="images_s/07.jpg" onmouseover="change(7);"/> <img src="images_s/08.jpg" onmouseover="change(8);"/> <img src="images_s/09.jpg" onmouseover="change(9);"/> <img src="images_s/10.jpg" onmouseover="change(10);"/> </p> <p> <img id="picture" src="images_b/default.jpg"/></p> <p> <input type="button" value="上一張" onclick="prev();"/> <input type="button" value="下一張" onclick="next();"/> </p> </body> </html> |
實作5：定時輪播
在按鈕下方加入
1 | <script>setInterval(next, 1000);</script> |
animal實作
沒有留言:
張貼留言