数组幻灯片显示与javascript不能顺利工作

Question

写了一些javascript(非常新的)来集中div并使其全屏调整为窗口，这很好，但现在我添加了一些我在网上找到的脚本，使用数组从一个图像过渡到另一个图像。它们似乎相互矛盾，搞乱了动画，最大的问题是当我调整窗口的大小。这是我的护照，你可以自己看看。提前谢谢。

http://jsfiddle.net/xPZ3W/

function getWidth() {
var w = window.innerWidth;
x = document.getElementById("wrapper");
x.style.transition = "0s linear 0s";
x.style.width= w +"px"; 
}
function moveHorizontal() {
var w = window.innerWidth;
x = document.getElementById("wss");
x.style.transition = "0s linear 0s";
x.style.left= w / 2 -720 +"px" ;         
}
function moveVertical() {
var h = window.innerHeight;
x = document.getElementById("wss");
x.style.transition = "0s linear 0s";
x.style.top= h / 2 -450 +"px" ;         
}
var i = 0; 
var wss_array = ['http://cdn.shopify.com/s/files/1/0259/8515/t/14/assets/slideshow_3.jpg?          48482','http://cdn.shopify.com/s/files/1/0259/8515/t/14/assets/slideshow_5.jpg?48482'];   
 var wss_elem;
function wssNext(){
  i++;                                 
  wss_elem.style.opacity = 0; 
if(i > (wss_array.length - 1)){           
i = 0;                           
 }
 setTimeout('wssSlide()',1000);
}

function wssSlide(){
 wss_elem = document.getElementById("wss")
 wss_elem.innerHTML = '<img src="'+wss_array[i]+'">';       
 wss.style.transition = "0.5s linear 0s";
 wss_elem.style.opacity = 1;
setTimeout('wssNext()',3000); 
}

Answer 1

所以我从零开始编写了这个JSFiddle，我希望它能帮到你。纯CSS从一个类转换到另一个类，使用你的数组url在图片之间切换。

基本上，只要第一张图片被设置为"活动"类，这只是在每次被调用时将"活动"类推进到下一个。

var pics = document.getElementById('slideshow').children,
    active = 0;
function slideshow() {
    for (var i = 0; i < pics.length; i++) {
        if (i == active && pics[i].className == "active") {
            console.log(i, active, (active + 1) % pics.length);
            active = (active + 1) % pics.length;
        }
        pics[i].className = "";
    }
    pics[active].className = "active";
    setTimeout(slideshow, 2000);
}
setTimeout(slideshow, 2000);

这里是CSS，它绝对定位容器，并隐藏它的所有子类，除非它有活动类，它将顺利过渡到。

#slideshow {
    position: absolute;
    top: 20%;
    bottom: 20%;
    left: 20%;
    right: 20%;
}
#slideshow img {
    position: absolute;
    max-height: 100%;
    max-width: 100%;
    opacity: 0;
    transition: opacity 1s linear;
}
#slideshow .active {
    opacity: 1;
}