如何使用jQuery创建淡入淡出图片幻灯片? [英] How do I create a fade picture slideshow with jQuery?
问题描述
我在下面尝试使用以下jQuery代码(我知道它没有进行优化，但是我不认为这是问题；不过可以随时对其进行优化):
I have the following jQuery code below I am trying to use (I know it's not optimized, but I do not think that is the issue; feel free to optimize it though):
$(document).ready(function(){
var cur = 0;
function slideshow() {
$("#imgdisp").fadeOut(400);
if (cur >= 3) {
cur = 1;
} else {
cur++;
}
$("#imgdisp").empty().append("<img height='456px' width='691px' id='img' src='slideshow_home/home_"+cur+".jpg'>");
$("#imgdisp").fadeIn(400);
setTimeout(slideshow,4000);
}
slideshow();
})
使用以下HTML文件:
With the following HTML file:
<!DOCTYPE html>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="jscodes/slideshow.js"></script>
<link type="text/css" rel="stylesheet" href="csscodes/slideshow.css">
<div id="imgdisp">
<img height="456px" width="691px" id="img" src="slideshow_home/home_1.jpg">
</div>
</html>
我要创建的幻灯片是按顺序执行以下操作的幻灯片:
What I am trying to create is a slideshow that does the following (in order):
1)淡出当前图像
2)删除当前图像
3)附加一个新图像(称为home_2.jpg，它会上升到home_3.jpg)
3) append a new image (called home_2.jpg, and it goes up to home_3.jpg)
4)淡入
5)等待四秒钟以重复下一张图片
5) wait four seconds to repeat with the next image
但是，当我尝试运行此代码时，它会在淡出之前添加新图像，因此图像会突然出现，淡出然后淡入并等待四秒钟，然后重复.我的问题是:
However, when I try to run this code, it appends the new image before fading out, so the image appears abruptly, fades out, then fades in, and waits four seconds before it repeats. My questions are:
1)如何修复此代码，以便在div淡出时更改图像?
1) How do I fix this code such that it changes the image while the div is faded out?
2)有没有办法使图像立即淡出到下一张图像?
2) Is there a way to have the image fade immediately to the next image?
在此先感谢所有贡献者:)
Thanks in advance to everyone who contributes :)
推荐答案
尝试以下方法:
$(document).ready(function(){
var cur = 1;
function slideshow() {
if (cur >= 3) {
cur = 1;
} else {
cur++;
}
setTimeout(function(){
$("#imgdisp").fadeOut(400, function(){
$("#imgdisp").empty().append("<img height='456px' width='691px' id='img' src='img_"+cur+".jpg'>");
$("#imgdisp").fadeIn(400);
});
slideshow();
}, 4000);
}
slideshow();
});
这篇关于如何使用jQuery创建淡入淡出图片幻灯片?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
