基本上，这是代码，我遇到了问题，但我在另一个问题中得到了帮助，所以它应该可以工作。
代码应该做什么 - 当您点击第一张图片时 = 淡出，然后从字符串中获取第一张图片，然后是第二张和第三张带有淡入/淡出效果的图片，当您点击如果是最后一张图片，则重置为原始图片。
所以这里是代码，如果您将带有 src 的 javascript 代码粘贴到原始图片到 Jsfiddle，并带有指向相同图片的链接 = 它会起作用，但不能使用具有本地路径的浏览器(这是正确的)。
它可能是 HTML 中的内容，尽管它不允许我添加它(反正它有点长)
这是javascript代码:
$(document).ready(function() {
var imageName = ["images/head4.jpg", "images/head3.jpg", "images/head.jpg"];
var indexNum = 0;
$("#head1").click(function() {
$("#head1").fadeOut(300, function() {
$("#head1").load(function() {
$("#head1").fadeIn(500);
});
$("#head1").attr("src", imageName[indexNum]);
indexNum++;
if (indexNum > 2) {
indexNum = 0;
}
});
});
});
最佳答案
您正在使用 jQuery(一个 Javascript 库)，因此您需要确保在 HTML head 标记中包含 jQuery 库，如下所示:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
我明白你想做什么了。 .load 函数应该在你是 src 附件之后。试试这个:
<body>
<img id="head1" src="" onclick="clickfunction(this)" />
</body>
<script>
var imageName = ["images/head4.jpg", "images/head3.jpg", "images/head.jpg"];
var indexNum = 0;
function clickfunction(curr) {
$(curr).fadeOut(300, function() {
$(this).remove();
$('<img id="head1" onclick="clickfunction(this)" src="' + imageName[indexNum] + '" />').load(function() {
$("body").append($(this));
$("#head1").fadeIn(500);
indexNum++;
if (indexNum > 2) {
indexNum = 0;
}
});
});
}
</script>
关于Javascript 在 jsfiddle 上工作，但在浏览器上打开本地 html 时不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28483893/