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
    }
}

如果您需要更改“完整”的名称，则只需在代码中的某个位置更新

鼠标悬停在更改图像上

2 个答案: