在鼠标上方改变图像

我想用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中打印出他。

来源

2013-04-02 Kyrbi

您需要switch的n。你switch荷兰国际集团在toFull

使用switch (n)代替

来源

2013-04-02 18:55:57

谢谢你，它的工作原理。 :) – Kyrbi

你的交换机使用的东西比什么不同你传递。您也可以通过更新图像的节点“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 
    } 
}

如果你有改变的名称“全”，你只需要在你的代码来更新它在一个地方

来源

2013-04-02 19:07:37 QueueHammer

在鼠标上方改变图像

回答

相关问题