如何使用javascript / jquery动态更改图像？
所以，我有这个http://jsfiddle.net/ithril/UjGhE/1/请检查出来。
我在这里尝试的是将主图像img标签的src动态更改为所单击图像的相同src属性。 简而言之，无论单击哪个图像，它都会显示在较大的窗口中，该窗口具有id =“main-photo”。
我看到我原来的代码已经做到了这一点:)因为没有人接受，我会尽我所能。 我将再次就一般事项给你一些指示：
- 您的超链接标记（
）是未公开的。 这肯定会产生validation错误。 你可以训练你的html技能定期validation自己 （听起来很脏吗？） - 在
.main-photo img {}position:relative:未关闭;’ - 在
.slider-large-image li img {}，margin: 10px未关闭！
笔记
- 您可以将此问题添加到原始问题中。 我很乐意添加这个function:)
- 我再次纠正了你的代码。
- 是否有充分的理由在您的轮播列表中使用超链接？ 我删除了标签，因为它们使事情变得不必要地复杂化。 您应该对上一个和下一个触发器执行相同的操作。
- 我不会修复布局。 你可以自己搞清楚:)
- 麦莉岩石！
- 我添加了默认图像，所以当第一次加载页面时 – 不会有空容器。
现场演示
http://jsfiddle.net/hobobne/K439d/
完整版代码：
How to dynamically change an image using javascript/jquery? - Kalle H. Väravas 
使用jQuery执行此操作非常简单。 当用户单击this标记。 只需取$(this).attr('src')并将$('#main-photo')的源设置为它，如下所示：
$('img').click(function(){ $('#main-photo').attr('src', $(this).attr('src')); });
–
看起来在您的代码中，您使用的是.main-photo img ，它也应该可以使用。 我现在正在看它。
–
编辑后，在审核您的代码后，您似乎有很多错过以及其他错误。 这是一个更新和工作的版本（减去CSS和额外的JavaScript）：
![]()
更改JS代码的这一部分：
$(".slider-large-image li a img").click(function() { $(".main-photo img").attr("src",$(this).attr('src')); });
至：
$(".slider-large-image li a").click(function() { $(".main-photo img").attr("src",$(this).find("img").attr("src")); return false; });
它应该工作正常。 例如： http ： //jsfiddle.net/UjGhE/23/
$("ul.slider-large-image li a").click(function(e){ e.preventDefault(); // prevent changing url $("#mainphoto").attr('src',$(this).children('a').attr('src')); //show clicked photo as main });
您所要做的就是从链接中删除href属性。 单击时，这会导致页面重新加载。 但是，此属性还负责将光标变为指针，因此您必须在CSS中手动分配一个： a { cursor: pointer }
现在单击img将在主图像持有者中加载所述图像，而不会重新加载页面，这会导致您的问题。
如果我是你，我会清理HTML，因为有很多未封闭的标签。