gpt4 book ai didi

JavaScript 在 2 张图片后淡入太快

转载 作者:行者123 更新时间:2023-11-28 03:24:53 25 4
gpt4 key购买 nike

我在 javascript 中遇到了一个小问题,即在 2 个图像之后它淡入的速度与其他图片一样慢,请参见此处:click me!我没有任何线索可以做,我已尽力修复它但没有成功。注意:我对此一窍不通,所以尽量解释得尽可能简单 :)

Javascript 代码:

sliderInt = 1;
sliderNext = 2;

$(document).ready(function() {
$("#slider > img#1").fadeIn(4000);
startSlider();
$("#slider > img#" + sliderNext).fadeIn(4000);
});

function startSlider() {
count = $("#slider > img").size();

loop = setInterval(function() {

if(sliderNext > count) {
sliderNext = 1;
sliderInt = 1;
}

$("#slider > img").fadeOut(4000);
$("#slider > img#" + sliderNext).fadeIn(4000);

sliderInt = sliderNext;
sliderNext = sliderNext + 1;

}, 10000);

}

HTML代码:

<!DOCTYPE html>
<html>
<head>
<title>MonsterCat | Made By TheRavenBlue</title>
<link rel="stylesheet" href="css/slider.css">
</head>
<body>
<body style="background-color:black;">

<script src="js/jquery.js"></script>
<script src="js/slider.js"></script>

<div class="wrapper">

<div id="slider">
<img id="1" src="images/image1.png">
<img id="2" src="images/image2.png">
<img id="3" src="images/image3.png">
<img id="4" src="images/image4.png">
</div>

<a href="#">Previous</a>
<a href="#">Next</a>

</div>

</body>
</html>

最佳答案

这里的问题似乎是 startSlider() 中的 fadeIn()fadeOut() 同时发生(你可以通过使用 chrome inspect element 来观察这一点。当前和下一个图像的内联 css 样式应该显示同时更改的不透明度),因此您应该调用 fadeOut() 作为 完成时的回调淡入

sliderInt = 1; slider 下一个 = 2;

$(文档).ready(函数(){ $("#slider > img#1").fadeIn(4000); 开始 slider (); $("#slider > img#"+ sliderNext).fadeIn(4000);});

function startSlider() {
count = $("#slider > img").size();

loop = setInterval(function () {

if (sliderNext > count) {
sliderNext = 1;
sliderInt = 1;
}

$("#slider > img").fadeOut(4000, function () {
$("#slider > img#" + sliderNext).fadeIn(4000);
});

sliderInt = sliderNext;
sliderNext = sliderNext + 1;

}, 10000);

}

关于JavaScript 在 2 张图片后淡入太快,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21947433/

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