Fatal编程技术网
  • image/
  • Image 单击缩略图以更改主图像？

Image 单击缩略图以更改主图像？

image

Image 单击缩略图以更改主图像？,image,Image,在学习了大约一个月的JS并完成了大约4门课程后，我仍然无法了解如何在单击缩略图时更改图像！我想做的很简单，我只想在单击缩略图时更改主图像！在本例中，div中有两个缩略图图像，其上方有一个主图像。我只想在单击缩略图时更改主图像。我知道这是DOM操作，并认为它是：document.getElementById 我已经做了一个小页面，这样我可以学习/尝试不同的东西，最终放弃并寻求帮助！代码如下： #MainContainer { position: relative; margin:0px auto;

在学习了大约一个月的JS并完成了大约4门课程后，我仍然无法了解如何在单击缩略图时更改图像！我想做的很简单，我只想在单击缩略图时更改主图像！在本例中，div中有两个缩略图图像，其上方有一个主图像。我只想在单击缩略图时更改主图像。我知道这是DOM操作，并认为它是：document.getElementById

我已经做了一个小页面，这样我可以学习/尝试不同的东西，最终放弃并寻求帮助！代码如下：

#MainContainer {
position: relative;
margin:0px auto;
width: 500px;
height: 400px;
border: 1px solid black;
}
#MainImage {
position: absolute;
top: 10px;
left: 50px;
width: 398px;
height: 265px;
background: url(MainImage01.jpg);
border: 1px solid black;
}
#TNBodyContainer {
position: absolute;
top: 290px;
left: 100px;
border: 1px solid black;
width: 268px;
height: 88px;
}
#TNOne {
position: relative;
width: 133px;
height: 88px;
background: url(SmallImage01.jpg);
}
#TNTwo {
position: relative;
left:135px;
width: 133px;
height: 88px;
background: url(SmallImage02.jpg);
}

<body>
<div id="MainContainer">
    <div id="MainImage"></div>
    <div id="TNBodyContainer">
        <div id="TNOne">
            <div id="TNTwo"></div>
        </div>
    </div>
非常感谢你的帮助

Margate

单击任一缩略图时，需要添加一些脚本来更改图像。加载页面时调用此函数。更改图像名称以适合。 这应该放在html页面的部分中

<script>
window.onload = function() {
        var mainImg = document.getElementById('Main');

        document.getElementById('TNOne').onclick = function() {
                mainImg.src = 'main1.jpg';
                //alert('one clicked');
        };
        document.getElementById('TNTwo').onclick = function() {
                mainImg.src = 'main2.jpg';
                //alert('two clicked');
        };
};
</script>
您需要添加一些脚本，以便在单击任一缩略图时更改图像。加载页面时调用此函数。更改图像名称以适合。 这应该放在html页面的部分中

<script>
window.onload = function() {
        var mainImg = document.getElementById('Main');

        document.getElementById('TNOne').onclick = function() {
                mainImg.src = 'main1.jpg';
                //alert('one clicked');
        };
        document.getElementById('TNTwo').onclick = function() {
                mainImg.src = 'main2.jpg';
                //alert('two clicked');
        };
};
</script>
要更改CSS背景属性中的图像，需要使用

TNOne {
width: 133px;
height: 88px;
float:left;
}
#TNTwo {
width: 133px;
height: 88px;
float:left;
}
正确的方法是添加事件侦听器：

document.getElementById("MainImage").style.background
它们都调用相同的函数，但使用event可以看到哪个函数使用event.target.id单击

然后，您可以决定要对switch语句执行什么操作。基本上说：if event.target.id==TNOne

你可以看到这一切我给你做了一把小提琴：

HTML和CSS中也有一些细微的更改。

要更改CSS背景属性中的图像，需要使用

TNOne {
width: 133px;
height: 88px;
float:left;
}
#TNTwo {
width: 133px;
height: 88px;
float:left;
}
正确的方法是添加事件侦听器：

document.getElementById("MainImage").style.background
它们都调用相同的函数，但使用event可以看到哪个函数使用event.target.id单击

然后，您可以决定要对switch语句执行什么操作。基本上说：if event.target.id==TNOne

你可以看到这一切我给你做了一把小提琴：

HTML和CSS中也有一些细微的变化。

非常感谢Daniel的回答以及在JSFIDLE中完成这项工作所花费的时间。我已经复制了代码，并将使用它来学习/解决我的问题！需要多做一些课程！非常欢迎您：-。。。我曾经在那里做过这件事，学习需要时间。@suspectus提供的解决方案可能也会起同样的作用。这里有更多的信息：祝你好运！非常感谢Daniel的回答以及在JSFIDLE中完成此操作所花费的时间。我已经复制了代码，并将使用它来学习/解决我的问题！需要多做一些课程！非常欢迎您：-。。。我曾经在那里做过这件事，学习需要时间。@suspectus提供的解决方案可能也会起同样的作用。这里有更多的信息：祝你好运！非常感谢你的怀疑。对我来说很方便。我将保留代码，因为我需要从中学习。非常感谢你帮助我：@Margate没问题-提供答案很有趣。如果您认为Daniel和/或我提供的解决方案有益，您可以通过向上投票表示感谢。非常感谢您的怀疑。对我来说非常方便。我将保留代码，因为我需要从中学习。非常感谢你帮助我：@Margate没问题-提供答案很有趣。如果您认为Daniel和/或我提供的解决方案有益，您可以通过向我们投赞成票来表示感谢。