Diaporama diaporama ne fonctionne pas bien avec javascript

Question

Écrit quelques javascript (très nouveau pour cela) pour centrer le div et le faire en plein écran d'ajustement comme le fait la fenêtre, cela fonctionne bien, mais maintenant j'ai ajouté un script que j'ai trouvé en ligne pour la transition d'une image à l'autre en utilisant un tableau. Ils semblent se contredire mutuellement l'animation, le plus gros problème est quand je redimensionne la fenêtre. Voici mon jsfiddle pour que vous puissiez voir par vous-même. Merci d'avance.

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

Je fouetté cette JSFiddle à partir de zéro, et je l'espère, ça dépanne. Transitions CSS pure de classe en classe en utilisant vos URL de tableau pour passer d'une image à l'autre. Fondamentalement, cela fait simplement avancer la classe "active" à la suivante à chaque fois qu'elle est appelée, à condition que la première image soit définie sur la classe "active".

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); 

Et voici le CSS, qui positionne absolument le conteneur, et cache tous ses enfants, à moins qu'il a la classe active, à laquelle il passera en douceur.

#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; 
}