1，下載jquery.js文件，並且導入
2，在下面的img中寫入可以用圖片路徑
1 <!-- 2 第一個bug： 3 剛打開頁面時，按一下左鍵圖片沒切換，再按第二下時才切換圖片。 4 第二個bug： 5 Ctrl+F5 刷新，按下右鍵之后出現的是麗江古城(第二張圖片)，正確的應該是瀘沽湖(第一張照片) 6 第三個bug： 7 Ctrl+F5 刷新，鍵盤左右箭頭切換多次，輕輕移動鼠標會顯示最后一張圖片。 8 --> 9 <!DOCTYPE html> 10 <html lang="en"> 11 <head> 12 <meta charset="UTF-8"> 13 <title>雲南旅游景點</title> 14 <!-- <link rel="stylesheet" href="css/index.css"> --> 15 <style> 16 *{padding: 0;margin: 0;} 17 body{background: rgba(0, 0, 255, .3);} 18 .flag{display: block;width: 20px;height: 20px;margin: 30px auto 40px;background: #fff;border-radius: 50%;} 19 .nav{display: flex;width: 80vw;margin: 0 auto 40px;justify-content: space-between;position: relative;} 20 .nav > a{padding: 5px;border: 1px solid #000;font-size: 16px;color: #255d7e;text-decoration: none;background: #fff;z-index: 10;} 21 .nav:before{display: block;width: 79vw;height: 13px;position: absolute;top: 10px;right: 2px;content: "";background: #fff;} 22 .content{width: 80vw;height: 75vh;background: #fff;margin: auto;position: relative;} 23 .content > img{width: 98%;height: 96%;position: absolute;top: 0;left: 0;right: 0;bottom: 0;margin: auto;} 24 </style> 25 <script type="text/javascript" src="js/jquery.js"></script> 26 </head> 27 <body> 28 <span class="flag"></span> 29 <nav class="nav"> 30 <a href="#">瀘沽湖</a> 31 <a href="#">麗江古城</a> 32 <a href="#">就這家-雲逸客棧</a> 33 <a href="#">西雙版納</a> 34 <a href="#">雲南紅酒庄</a> 35 <a href="#">轎子雪山</a> 36 <a href="#">普者黑</a> 37 <a href="#">海埂大壩</a> 38 <a href="#">玉龍灣</a> 39 <a href="#">昆明郊野公園</a> 40 <a href="#">歐洲風琴小鎮</a> 41 <a href="#">茶馬古道</a> 42 </nav> 43 <div class="content"> 44 <img src="images/1.jpg"> 45 <img src="images/2.jpg"> 46 <img src="images/3.jpg"> 47 <img src="images/4.jpg"> 48 <img src="images/5.jpg"> 49 <img src="images/6.jpg"> 50 <img src="images/7.jpg"> 51 <img src="images/8.jpg"> 52 <img src="images/9.jpg"> 53 <img src="images/10.jpg"> 54 <img src="images/11.jpg"> 55 <img src="images/12.jpg"> 56 </div> 57 <script type="text/javascript"> 58 $(document).ready(function(){ 59 var index=0;//默認索引值 60 //顯示當前索引對應的圖片，隱藏其他圖片 61 function switchPic(index){ 62 $('img').eq(index).css({'opacity':'1'}).siblings().css({'opacity':'0'}); 63 } 64 65 /*//添加下面代碼塊即可解決第一個和第二個bug 66 //初始化圖片顯示第一張 67 function init(){ 68 index=0; 69 switchPic(index); 70 } 71 //初始化圖片顯示 72 init();*/ 73 74 /* //添加下面代碼塊即可解決第三個bug 75 //過濾掉document觸發的mouseenter事件， 76 //只有A標簽觸發的mouseenter事件才獲得當前index 77 function mouseEvent(event){ 78 //如果是A標簽觸發的事件，那么就獲得當前的索引index 79 if (event.currentTarget.nodeName=="A") { 80 index=$(this).index(); 81 switchPic(index); 82 }else{ 83 return true;//默認其他鼠標事件執行其他默認事件，不對index進行操作。 84 } 85 }*/ 86 87 //鼠標事件 88 function mouseEvent(event){ 89 event.stopPropagation();//阻止事件冒泡和事件捕獲 90 index=$(this).index();//獲取當前對象的索引值 91 switchPic(index); 92 } 93 //鍵盤事件 94 function keyEvent(event){ 95 event.stopPropagation();//阻止事件冒泡和事件捕獲 96 //37是鍵盤向左的鍵碼，如果是按鍵盤左鍵 97 if (event.keyCode=='37') { 98 //如果索引值小於等於0，那么索引值就要變成最大:index=$('a').length-1 99 index<=0?index=$('a').length-1:index-=1; 100 //39是鍵盤向右的鍵碼，如果是按鍵盤右鍵 101 }else if (event.keyCode=='39') { 102 //如果索引值大於等於最大的：$('a').length-1，那么index就要變成最小index=0; 103 index>=$('a').length-1?index=0:index+=1; 104 }else{ 105 // 如果是按其他鍵，即什么都不做 106 return true; 107 } 108 switchPic(index); 109 } 110 //使用on進行事件綁定，document不是標簽，而是一個文檔對象，所以不用$+引號,而是$(document) 111 //這里的事件綁定很特別，需要深入理解：$('a').add(document).on({...}) 112 $('a').add(document).on({ 113 mouseenter:mouseEvent, 114 keydown:keyEvent 115 }) 116 }) 117 </script> 118 </body> 119 </html> 120 121 <!-- 122 第一個bug： 123 剛打開頁面時，按一下左鍵圖片沒切換，再按第二下時才切換圖片。 124 思路： 125 1，說明問題出在左按鍵的代碼塊中 126 2，按第二下才切換圖片，說明index有問題 127 綜上所述：可以在做按鍵的代碼塊中輸出index值的變化。 128 代碼index問題沖突： 129 1，初始化 var index=0; 130 2，在html中，默認前面的內容會被后面的內容覆蓋。 131 同樣的，一組圖片被進行絕對定位，那么后面的圖片會覆蓋前面的圖片，所以這里顯示的是最后一張圖片。 132 3，所以我們自定index值，和實際上顯示圖片的index值不一致，所以這里我們需要改成一致的。這就是解決思路： 133 解決辦法：就是把定義index的值 和 頁面加載時顯示的index 相等即可。 134 1，既然設置了初始index=0，那就讓圖片也顯示第一張，其他全部隱藏。 135 2，初始化圖片顯示第一張 136 function init(){ 137 index=0; 138 switchPic(index); 139 } 140 //初始化圖片顯示 141 init(); 142 3，另一種方法就是把，index=$('a').length-1。 143 144 第二個bug： 145 Ctrl+F5 刷新，按下右鍵之后出現的是麗江古城(第二張圖片)，正確的應該是瀘沽湖(第一張照片) 146 思路： 147 1，按下右鍵按鈕，跳過第一張圖片，直接顯示第二張圖片，說明問題出在右鍵代碼塊中，且index有問題。 148 2，這bug，也是由於初始化時，index=0,而實際圖片顯示的index=$('a').length-1，引起的。 149 所以，第一個bug解決了，第二個bug也就隨之解決了。 150 第三個bug： 151 1，Ctrl+F5 刷新，鍵盤左右箭頭切換多次，輕輕移動鼠標會顯示最后一張圖片。 152 2，Ctrl+F5 刷星，圖片切換到非最后一張，鼠標移出document文檔，再進來，圖片立馬切換最后一張。 153 思路： 154 1，問題出在，鼠標輕輕移動就顯示最后一張圖片，說明問題出在鼠標移動事件中，可以輸出看看具體什么事件。 155 解決辦法： 156 1，console.log(event); 在鼠標事件代碼塊中輸出具體執行了鼠標的什么事件。 ，返回的是mouseenter事件 157 2，顯示：k.Event {originalEvent: MouseEvent, type: "mouseenter", isDefaultPrevented: ƒ, target: html, 158 currentTarget: document, …} 159 3， originalEvent:MouseEvent /ə'rɪdʒənl/ 原型事件：鼠標事件 160 type:"mouseenter" 事件類型 161 target: html 事件綁定的對象是：html 162 currentTarget: document 觸發事件發生的對象：document 163 4，經輸出，都是鼠標觸發了mouseenter事件才進行顯示最后一張圖片的，所以只要找到該事件，並且過濾掉即可解決。 164 5，修改鼠標事件函數 165 function mouseEvent(event){ 166 console.log(event.currentTarget);//返回：document對象 167 console.log(event.currentTarget.nodeName);//獲取該對象的節點名稱 168 //使用節點名稱判斷，如果是A標簽，就進行Index操作，否則就不進行任何操作。 169 //即：在document觸發mouseenter事件時，就不進行index變化，過濾掉即可。 170 if (event.currentTarget.nodeName=="A") { 171 index=$(this).index();//獲取當前對象的索引值 172 switchPic(index); 173 }else{ 174 return true;//返回：true表示其他按鍵執行默認事件 175 } 176 } 177 -->
img圖片：
