Question

我正在处理一个简单的图片库页面，其中包含每次点击缩略图图片时交换的主图片。我知道我这样做的方式在JQuery中要容易得多，但我决定在进入JQuery之前很好地掌握JS！

问题在于：我想将主图像保持为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>

Answer 1

尝试更改：

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;" />

Answer 2

跟进局域网的评论：

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

JavaScript对象不更改图像

2 个答案: