点击缩图更改主要图片？

在学习了JS约一个月后，完成了四门课程之后，我仍然无法确定在单击缩略图时如何更改图像！我想要做的事很简单，我只想在点击缩略图时更改主图像！在这个例子中，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>

非常感谢您的帮助。

马盖特

来源

2013-03-22 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>

两个缩略图div变成<img>标记具有相同的ID。类似地，主要<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，这里浮动是用来保持缩略图的TNBodyContainer专区内的同一行。

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

来源

2013-03-22 00:52:24 suspectus

非常感谢你suspectus.Very方便我。我会保留代码，以便从中学习。非常好你帮助我：） – Margate 2013-03-23 03:20:04

@Margate没问题 - 提供答案很有趣。如果认为Daniel提供的解决方案和/或我的解决方案是有益的，那么您可以通过给我们加票来始终表示您的赞赏。 – suspectus 2013-03-23 09:12:46

要更改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-22 01:08:20 Daniel

非常感谢丹尼尔给出的答案和在jsfiddle中花费的时间。我已经复制了代码并将用它来学习/解决我的问题！需要做更多的课程！ – Margate 2013-03-23 03:12:27

非常欢迎您:-) ...在那里做过，需要花时间学习。 @suspectus提供的解决方案可能工作原理相同。这里有更多的信息在这里：http://stackoverflow.com/questions/6348494/addeventlistener-vs-onclick 祝你好运！ – Daniel 2013-03-23 03:21:15

点击缩图更改主要图片？

回答

相关问题