Question

在学习了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>

非常感谢您的帮助。

马盖特

Answer 1

单击任一缩略图时，您需要添加一些脚本来更改图像。加载页面时会调用此函数。更改图像名称以适应。这应该放在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>

两个缩略图div成为具有相同ID的<img>标签。类似地，主<img>也被定义（id =“Main”）。现在的元素是可点击的。

<div id="MainContainer">
    <div id="MainImage">
        <img id="Main" src="MainImage01.jpg"</img>
    </div>
    <div id="TNBodyContainer">
        <img id="TNOne" src="thumb1.jpg"></img>
        <img id="TNTwo" src="thumb2.jpg"></img>
    </div>
</div>

最后用于缩略图的CSS，这里使用float来将缩略图保持在TNBodyContainer div中的同一行。

TNOne {
width: 133px;
height: 88px;
float:left;
}
#TNTwo {
width: 133px;
height: 88px;
float:left;
}

Answer 2

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

document.getElementById("MainImage").style.background

正确的方法是添加事件监听器：

 document.getElementById("TNOne").addEventListener("click", function (event) {
          setImage(event);
      }, false);
      document.getElementById("TNTwo").addEventListener("click", function (event) {
          setImage(event);
      }, false);

  }

它们都调用相同的函数，但是通过事件可以看到哪个“clicked”带有“event.target.id”。

然后，您可以决定要执行的操作，例如switch语句。基本上说：if event.target.id ==“TNOne”。

你可以看到我让你成为一个小提琴：http://jsfiddle.net/djwave28/32pQD/3/

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

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

2 个答案: