作为另一种选择,如果您想制作一个幻灯片。
通常的方法是动画化一个框架并动画化一个框架。这就是滑动效果和淡入淡出效果的原理。您的示例是淡入的。这很好,但是当您看到它在工作时可能不是您真正想要的。
如果您真正想要的是在图像中动画化...OUT,则需要使用更复杂的东西。
要在图像中动画化,必须为每个图像元素使用一个图像元素,然后将其中一个翻转出来并将其中一个翻转进去。在淡入淡出的情况下,如果您想要滑动,则将它们放在彼此旁边。
然后,您的幻灯片函数会起魔法作用,但在此之前,您需要将所有这些数组中的图像添加到dom中,这称为动态dom注入,非常酷。
确保您检查fiddle以获取完整的演示和代码,它链接在底部。
HTML
<div id="slider">
// ...we will dynamically add your images here, we need element for each image
</div>
JS
var curIndex = 0,
imgDuration = 3000,
slider = document.getElementById("slider"),
slides = slider.childNodes;
imgArray = [
'http://placehold.it/300x200',
'http://placehold.it/200x100',
'http://placehold.it/400x300'];
function buildSlideShow(arr) {
for (i = 0; i < arr.length; i++) {
var img = document.createElement('img');
img.src = arr[i];
slider.appendChild(img);
}
}
function slideShow() {
function fadeIn(e) {
e.className = "fadeIn";
};
function fadeOut(e) {
e.className = "";
};
fadeOut(slides[curIndex]);
curIndex++;
if (curIndex == slides.length) {
curIndex = 0;
}
fadeIn(slides[curIndex]);
setTimeout(function () {
slideShow();
}, imgDuration);
};
buildSlideShow(imgArray);
slideShow();
Fiddle:
http://jsfiddle.net/f8d1js04/2/