gpt4 book ai didi

Javascript 在 jsfiddle 上工作,但在浏览器上打开本地 html 时不起作用

转载 作者:行者123 更新时间:2023-11-28 08:27:10 26 4
gpt4 key购买 nike

基本上,这是代码,我遇到了问题,但我在另一个问题中得到了帮助,所以它应该可以工作。

代码应该做什么 - 当您点击第一张图片时 = 淡出,然后从字符串中获取第一张图片,然后是第二张和第三张带有淡入/淡出效果的图片,当您点击如果是最后一张图片,则重置为原始图片。

所以这里是代码,如果您将带有 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/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com