在鼠標上方改變圖像

Question

我想用javascript製作小滑塊，這是我的代碼。 HTML：

<div id="slider"> 
    <div id="thumbs"> 
     <span id="img1"><img src="Anim/01.png" onmouseover="tofull(1)"></span><br> 
     <span id="img2"><img src="Anim/02.png" onmouseover="tofull(2)"></span><br> 
     <span id="img3"><img src="Anim/03.png" onmouseover="tofull(3)"></span><br> 
     <span id="img4"><img src="Anim/04.png" onmouseover="tofull(4)"></span><br> 
     <span id="img5"><img src="Anim/05.png" onmouseover="tofull(5)"></span><br> 
     <span id="img6"><img src="Anim/06.png" onmouseover="tofull(6)"></span> 
    </div> 
    <div id="full"> 
     <img src="Anim/01.png"> 
    </div> 
</div> 

這是我的javascript

function tofull(n){ 
    switch (tofull){ 
     case 1: 
      document.getElementById("full").innerHTML = "<img src='Anim/01.png'>"; 
      break; 
     case 2: 
      document.getElementById("full").innerHTML = "<img src='Anim/02.png'>"; 
      break; 
     case 3: 
      document.getElementById("full").innerHTML = "<img src='Anim/03.png'>"; 
      break; 
     case 4: 
      document.getElementById("full").innerHTML = "<img src='Anim/04.png'>"; 
      break; 
     case 5: 
      document.getElementById("full").innerHTML = "<img src='Anim/05.png'>"; 
      break; 
     case 6: 
      document.getElementById("full").innerHTML = "<img src='Anim/06.png'>"; 
      break; 
    } 
} 

每次我在#thumbs在圖像上懸停，沒有任何反應。你能告訴我爲什麼嗎？想法是，如果我徘徊在img1上，我想讓他在#full中打印出他。

Answer 1

您需要switch的n。你switch荷蘭國際集團在toFull

使用switch (n)代替

Answer 2

你的交換機使用的東西比什麼不同你傳遞。您也可以通過更新圖像的節點「SRC」屬性減少一些你的代碼標籤。

function tofull(n){ 
    //Select 'full' and get the image tag inside 
    var imgEl = document.getElementById("full").childNodes[0]; 
    switch (n){ 
     case 1: 
      imgEl.src = 'Anim/01.png'; 
      break; 
     case 2: 
      imgEl.src = 'Anim/02.png'; 
      break; 
     //Continue the pattern 
    } 
} 

如果你有改變的名稱「全」，你只需要在你的代碼來更新它在一個地方