[英]JQuery: How to change image after time with fadeIn?
I want to change an image automatically after 2000ms. 我想在2000毫秒后自动更改图像。 The image should fade in.
图像应淡入。
My HTML: 我的HTML:
<div class="nile-slider large-12 column">
<img alt="landing page 3" src="assets/Startseite/Slider/Slider_2.jpg">
</div>
My JS: 我的JS:
// change header image after 2 seconds
var images = ['Slider_1.jpg','Slider_2.jpg','Slider_3.jpg', 'Slider_4.jpg'],
index = 0, // starting index
maxImages = images.length - 1;
var timer = setInterval(function() {
var currentImage = images[index];
index = (index == maxImages) ? 0 : ++index;
$('.nile-slider img').attr('src','assets/Startseite/Slider/'+currentImage).fadeIn('slow');
}, 2000);
With this code the images changes but it does not fade in. How can I force the images to fade in (and even fade out)? 使用此代码,图像会发生变化,但不会淡入。如何强制图像淡入(甚至淡出)?
You can combine fadeOut
and fadeIn()
using fadeOut
callback function, to achieve this. 您可以使用
fadeOut
回调函数将fadeOut
和fadeIn()
结合使用,以实现此目的。
// change header image after 2 seconds
var images = ['Slider_1.jpg','Slider_2.jpg','Slider_3.jpg', 'Slider_4.jpg'],
index = 0, // starting index
maxImages = images.length - 1;
var timer = setInterval(function() {
var currentImage = images[index];
index = (index == maxImages) ? 0 : ++index;
$('.nile-slider img').fadeOut(200, function() {
$('.nile-slider img').attr("src", 'assets/Startseite/Slider/'+currentImage);
$('.nile-slider img').fadeIn(200);
});
}, 2000);
Providing the new source as callback of fadeOut
may do the trick: 提供新的源作为
fadeOut
回调可以达到目的:
$('.nile-slider img')
.fadeOut('fast',
function () {
$('.nile-slider img')
.attr('src','assets/Startseite/Slider/'+currentImage)
.fadeIn('slow');
}
);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.