javascript - Javascript未运行

单击图像时，应将此javascript代码切换到html文件夹中的文件夹中的图像。
在到达最后一张图像后，如果再次单击，它将重置为第一张图像。
此外，出现的图像上还有淡入和淡出效果。

它不起作用，我怀疑我以某种方式将路径文件写入了图像，并且.attr不会将第一个图像的src更改为其他图像。

要记住的事情=一个非常初级的程序员，仅在两天内就学习了html和CSS，我将不胜感激!

这是代码:

$(document).ready(function() {
    var imageName = ["head.jpg", "head3.jpg", "head4.jpg"];
    var indexNum = 0;

    $("#head1").click(function() {
        $("#head1").fadeOut(300, function() {
            $("#head1").attr("src", imageName[indexNum])";
            //$(indexNum).css("height=600px,width=1000px")
            indexNum++;
            if (indexNum > 2) {
                indexNum = 0;
            }
            $("#head1").fadeIn(500);
        )};
    )};
)};

最佳答案

即使以为已经解决了，这里还是摆弄了您的原始代码。 http://jsfiddle.net/goqz3coj/

最好查看您的代码应该如何工作，而不是提供其他代码

$(document).ready(function() {
    var imageName = ["head.jpg", "head3.jpg", "head4.jpg"];
    var indexNum = 0;

    $("#head1").click(function() {
        $("#head1").fadeOut(300, function() {
            $("#head1").attr("src", imageName[indexNum]);
            indexNum++;
            if (indexNum > 2) {
                indexNum = 0;
            }
            $("#head1").fadeIn(500);
        });
    });
});

第二版等待图像加载，然后再次显示...
http://jsfiddle.net/goqz3coj/2/

通过简单地使用.load，您可以等待图像加载然后显示。

$(document).ready(function() {
    var imageName = ["http://placehold.it/200x200", "http://placehold.it/300x300", "http://placehold.it/400x400"];
    var indexNum = 0;

    $("#head1").click(function() {
        $("#head1").fadeOut(300, function() {
            $( "#head1" ).load(function() {
                $("#head1").fadeIn(500);
              // Handler for .load() called.
            });
            $("#head1").attr("src", imageName[indexNum]);
            indexNum++;
            if (indexNum > 2) {
                indexNum = 0;
            }
        });
    });
});

乔纳斯·格鲁曼(Jonas Grumann)将您的图片网址显示为与实际图片一样容易显示。

关于javascript - Javascript未运行，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/28478470/