2

在学习了大约一个月的 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>

非常感谢您的帮助。

马盖特

4

2 回答 2

3

单击任一缩略图时，您需要添加一些脚本来更改图像。该函数在页面加载时调用。更改图像名称以适合。这应该放在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 成为<img>具有相同 ID 的标签。类似地，main<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;
}
于 2013-03-22T00:52:24.867 回答
1

要更改 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);

  }

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

然后，您可以决定要做什么，例如 switch 语句。基本上说：如果 event.target.id == "TNOne"。

你可以看到这一切我给你做了一个小提琴：http: //jsfiddle.net/djwave28/32pQD/3/

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

于 2013-03-22T01:08:20.220 回答