0

我想用 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.

4

2 回答 2

2

你需要switch打开n. 你在switch继续toFull

switch (n)改为使用

于 2013-04-02T18:55:57.050 回答
0

您的开关使用的东西与您传入的不同。您还可以通过更新图像标签的节点“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-02T19:07:37.753 回答