Javascript。OnClick Image src+；1.

这是我的代码：

<img name="changer1" alt="before" src="img/.../1/before.jpg"/>
<img name="changer2" alt="after" src="img/.../1/after.jpg"/>

<img src="img/next.png" onclick="changer1.src='img/.../2/before.jpg'; changer2.src='img/.../2/after.jpg'"/>

<img src="img/next.png" onclick="moveToNextImage()"/>

因此，当我点击“next.png”图片时，两张图片都变为新文件夹中的图片。这很好用。但我想要的是，当我点击“next.png”图像时，src代码会自动改变。因此，当我单击时，它看起来像：

<img src="img/next.png" onclick="changer1.src='img/.../3/before.jpg'; changer2.src='img/.../3/after.jpg'"/>

<img src="img/next.png" onclick="changer1.src='img/.../4/before.jpg'; changer2.src='img/.../4/after.jpg'"/>

当我再次单击时，它看起来像：

<img src="img/next.png" onclick="changer1.src='img/.../3/before.jpg'; changer2.src='img/.../3/after.jpg'"/>

<img src="img/next.png" onclick="changer1.src='img/.../4/before.jpg'; changer2.src='img/.../4/after.jpg'"/>

因此文件夹始终移动+1。从2点到3点。从3点到4点

我希望你明白我的意思并帮助我：）

---

很抱歉我的英语不好。

您可以使用Javascript中的基本DOM方法来更改它。首先，我应该指出'name'是一个已折旧的属性，HTML5使用'id'属性

无论如何，首先我们需要在img中添加一些标签，以便在JS中找到它们

<img id="changer1" alt="before" src="img/.../1/before.jpg"/>
<img id="changer2" alt="after" src="img/.../1/after.jpg"/>

我刚刚使用了您现有的名称属性。我想这就是为什么你会把它们包括进来！然后，我们添加一个JS函数以附加到单击侦听器

<script>
var pictureID = 1;
function moveToNextImage(){
    pictureID++;
    var string = 'img/.../'+pictureID;
    document.getElementById('changer1').src = string + '/before.jpg';
    document.getElementById('changer2').src = string + '/after.jpg;
}
</script>

var=1；
函数moveToNextImage（）{
pictureID++；
变量字符串='img/..'+pictureID；
document.getElementById（'changer1'）.src=string+/before.jpg'；
document.getElementById（'changer2'）.src=string+'/after.jpg；
}

此脚本为文件夹值保留一个计数器，并使用该计数器生成新的源字符串以替换旧的源字符串。该函数向计数器添加1，然后将2个元素上的src属性更改为新属性

您的“下一步”按钮应如下所示，以使用该函数

$（文档）.ready（函数（）{
var i=2；
$（“#测试”）。单击（函数（）{
var srcfeer='img/../'+i+'/before.jpg'；
var srcfafter=“img/../”+i+“/after.jpg”；
$（“#changer1”）.attr（“src”，srcebefore）；
$（“#changer2”）.attr（“src”，srcAfter）；
console.log（srcbefore+“：”+srcAfter）；
i++；
});
});

希望这能解决你的问题。。 供参考- 不要在HTML中耦合JS代码。把它分开。

---

使用类或ID而不是名称。

好的，所以我现在的问题是我已经为这两个图像安装了脚本allready

因此，我的完整脚本如下：

<script type="text/javascript" src="js/jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.13.custom.min.js"></script>
<script type="text/javascript" src="js/jquery.beforeafter-1.4.js"></script>
<script type="text/javascript">
$(function(){
    $('#container').beforeAfter();
});
</script>

<div id="container">
 <div><img id="changer1" alt="before" src="http://www11.pic-upload.de/12.09.14/oha2eiilhnay.jpg"/></div>
 <div><img id="changer2" alt="after" src="http://www11.pic-upload.de/12.09.14/gdbsfgzsh2f.jpg"/></div>
</div>

$（函数（）{
$（“#容器”）.beforefafter（）；
});

我希望你知道我的问题是什么

---

当我从div中删除“container”ID时，Raj中的脚本会运行良好。但不是我的时间比较脚本，您可以在1链接中找到。

在jq中，您必须将所有代码包装在$（document）.ready（function（）{}）中。在给定的示例中，等待

ready

事件是不必要的。这非常有效，但仍然存在一个新问题。这两个图像在另一个脚本中。时间比较脚本。。。所以我需要将它们放在id为“containier”的div中，脚本如下：$（function（）{$（'#container'）.beforefafter（）；}）；因此，当我从div中删除“container”id时，您的脚本可以工作，但我的其他脚本不能工作……注意：

script

标记不能是

html

的子项，您需要将其移动到

正文中才能有效
html5
@t。neise将它们放在头部通常是更好的做法，将它与您的htmlSame问题的显示部分分开，就像我对Raj脚本的评论一样我已经阅读了您对Raj脚本的评论，但听起来好像您在问为什么您没有向我们展示的其他脚本不起作用？你能在问题中加一个更完整的例子吗？我补充了一个新的答案。希望你能帮助我：）