Question

这是我的代码：

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

因此，当我点击“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'"/>

所以文件夹总是移动+1。从2到3.从3到4 ......

我希望你知道我的意思并帮助我:)。

抱歉我的英语不好。

Answer 1

您可以使用Javascript中的基本DOM方法进行更改。首先，我应该指出＆＃39; name＆＃39;是一个折旧属性，HTML 5使用＆＃39; id＆＃39;属性改为。

无论如何，首先我们需要为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>

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

您的下一个按钮应该是这样的，而不是使用该功能。

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

Answer 2

Okey所以我现在的问题是我已经为这两张图片安装了 this 脚本

所以我的完整脚本是这样的：

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

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

当我从div中删除“容器”ID时，来自Raj的脚本完成了perfekt。但不是我的时间比较脚本，你可以在1链接中找到。

Answer 3

<!DOCTYPE html>
<html>
<body>
<img name="changer1" id="changer1" alt="before" src="img/.../1/before.jpg"/>
<img name="changer2" id="changer2" alt="after" src="img/.../1/after.jpg"/>

<img src="img/next.png" id="test"/>
</body>
<script src="jquery.js"></script>
<script>

$(document).ready(function(){
    var i = 2;
    $("#test").click(function(){
        var srcbefore='img/.../'+i+'/before.jpg';
        var srcAfter="img/.../"+i+"/after.jpg";
        $("#changer1").attr("src",srcbefore);
        $("#changer2").attr("src",srcAfter);
        console.log(srcbefore+"::"+srcAfter);
        i++;
    });
});

</script>
</html>

希望这能解决你的问题.. 仅供参考 - 不要将您的JS代码与HTML结合。让它分开。使用类或ID而不是名称。

的JavaScript。 OnClick Image src +1

3 个答案: