1

我正在处理一个简单的图片库页面，该页面包含一个主图像，每当单击缩略图时都会交换该主图像。我知道我这样做的方式在 JQuery 中会容易得多，但我决心在进入 JQuery 之前掌握 JS！

这是问题所在：我想将主图像保持在 1000px 宽，并且现在只使用 overflow-x（已经完成），当单击缩略图时，所有更改都是主图像。我认为我对 JS 代码很了解，并且只需要了解我在这里做错了什么的人进行一些调整！我要做的就是getElementById（URL）并交换它！

我不知道如何将图像上传到 JS fiddle，所以我的示例是图像较少，但所有代码都在那里，并且在本地可以正常处理图像。

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>
4

2 回答 2

4

尝试改变：

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-11T19:33:19.810 回答
1

跟进 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-11T21:24:13.557 回答