我正在开发一个简单的图库页面，其中包含一个主图像，只要单击缩略图图像就会交换该主图像。我知道我这样做的方式在 JQuery 中会容易得多，但我决心在进入 JQuery 之前掌握好 JS!
问题来了: 现在，当单击缩略图时，我想仅使用 overflow-x 将主图像保持在 1000px 宽(已经完成)，所有更改都是主图像。我想我已经很熟悉 JS 代码了，它只需要了解我在这里做错了什么的人稍微修改一下!我要做的就是获取 ElementById(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>
最佳答案
尝试改变:
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;" />
关于JavaScript 对象不改变图像，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/17052198/