JavaScript对象不变图像

我正在处理一个简单的图像库页面，该页面包含一个单击缩略图图像时被交换的主图像。我知道在JQuery中做这件事的方式会容易得多，但我决心在继续使用JQuery之前抓住JS。JavaScript对象不变图像

这里是问题：现在，当单击缩略图图像时，我希望主图像保持在1000px宽，仅用overflow-x（已完成），所有变化都是主图像。我认为我接近JS代码，并且只需要一些懂得我在这里做错了什么的人来调用！我所要做的就是getElementById（URL）并交换它！

我不知道如何上传图像到JS小提琴，所以我的例子是图像少，但所有代码都在那里，并在本地处理图像。

http://jsfiddle.net/Margate/zJjys/

代码如下：// 预先感谢您的任何帮助

<html> 
<head> 
<title>Confused!</title> 

<style type="text/css"> 
#main-image-container{width: 1000px; height: 350px; position: absolute; top: 172px; left: 0px; border: 1px solid black; overflow-x: auto; overflow-y: hidden;} 
#graffiti-panorama-image-bar{width: 600px; height: 95px; position: absolute; top: 540px; left: 200px; border: 1px solid black; overflow: auto; background-color: white;} 
.image{position: absolute; cursor: pointer;} 
#center-page{border:1px solid red; width: 1005px; height: 700px; position: absolute; margin: 0px auto;}

<body> 
<div id="center-page"> 

<div id="main-image-container"> 
<img id="image" src="image-01.jpg" /> 
</div> 

<div id="graffiti-panorama-image-bar"> 
<img src="small-01.jpg" onclick="Main1()" class="image" style=" left: 0px;" /> 
<img src="small-02.jpg" onclick="Main2()" class="image" style=" left: 307px;" /> 
<img src="small-03.jpg" onclick="Main3()" class="image" style=" left: 626px;" /> 
<img src="small-04.jpg" onclick="Main4()" class="image" style=" left: 941px;" /> 
<img src="small-05.jpg" onclick="Main5()" class="image" style=" left: 1260px;" /> 
</div> 
</div> 

<script type="text/javascript"> 
function Main1(){var obj=document.getElementById("image").style; obj.src="image-01.jpg";} 
function Main2(){var obj=document.getElementById("image").style; obj.src="image-02.jpg";} 
function Main3(){var obj=document.getElementById("image").style; obj.src="image-03.jpg";} 
function Main4(){var obj=document.getElementById("image").style; obj.src="image-04.jpg";} 
function Main5(){var obj=document.getElementById("image").style; obj.src="image-05.jpg";} 
</script> 

</body> 
</html>

来源

2013-06-11 Margate

尝试改变：

function Main1(){var obj=document.getElementById("image").style; obj.src="image-01.jpg";} 
function Main2(){var obj=document.getElementById("image").style; obj.src="image-02.jpg";} 
function Main3(){var obj=document.getElementById("image").style; obj.src="image-03.jpg";} 
function Main4(){var obj=document.getElementById("image").style; obj.src="image-04.jpg";} 
function Main5(){var obj=document.getElementById("image").style; obj.src="image-05.jpg";}

要：

function Main1(){var obj=document.getElementById("image"); obj.src="image-01.jpg";} 
function Main2(){var obj=document.getElementById("image"); obj.src="image-02.jpg";} 
function Main3(){var obj=document.getElementById("image"); obj.src="image-03.jpg";} 
function Main4(){var obj=document.getElementById("image"); obj.src="image-04.jpg";} 
function Main5(){var obj=document.getElementById("image"); obj.src="image-05.jpg";}

的.src属性是图像本身，而不是它的风格集合的性质。

您也可以巩固这些功能集成到一个单一的功能，并通过图像URL作为参数：

function Main(imageUrl) 
{ 
    var obj=document.getElementById("image"); 
    obj.src=imageUrl; 
}

然后调用它：

<img src="small-01.jpg" onclick="Main('image-01.jpg')" class="image" style=" left: 0px;" />

来源

2013-06-11 19:33:19

THANK YOU SO MUCH：）这工作完美正是我想要做的！我想我一定尝试了其他所有可能的方式！这种语言正在推动着我！ – Margate

组合这些功能不是更容易吗？它们之间的唯一区别是文件名中的数字 – Ian

是的！但我不知道该怎么做！我知道（因为CSS），这是组合事物的方式，但没有那么多是的！我仍然在努力解决所有问题，并努力让事情发挥一点作用。 – Margate

跟进LAN的评论：

<div id="main-image-container"> 
<img id="image" src="image-01.jpg" /> 
</div> 

<div id="graffiti-panorama-image-bar"> 
<img src="small-01.jpg" onclick="Main('image-01.jpg')" class="image" style=" left: 0px;" /> 
<img src="small-02.jpg" onclick="Main('image-02.jpg')" class="image" style=" left: 307px;" /> 
<img src="small-03.jpg" onclick="Main('image-03.jpg')" class="image" style=" left: 626px;" /> 
<img src="small-04.jpg" onclick="Main('image-04.jpg')" class="image" style=" left: 941px;" /> 
<img src="small-05.jpg" onclick="Main('image-05.jpg')" class="image" style=" left: 1260px;" /> 
</div> 
</div> 

<script type="text/javascript"> 
function Main(image) { 
     document.getElementById("image").src=image; 
    } 
</script> 

</body> 
</html>

来源

2013-06-11 21:24:13 Jacob

现在我明白了！那很容易！我非常感谢Jacob，我了解到。我想这样做，但不知道如何...... – Margate

JavaScript对象不变图像

回答

相关问题