Array幻燈片不能正常工作使用javascript

-1

寫一些JavaScript（非常新）以居中div，並使其作爲窗口調整全屏幕，工作正常，但現在我添加了一些我在網上找到的腳本轉換從一個圖像到另一個使用數組。他們似乎互相矛盾搞亂動畫，最大的問題是當我調整窗口大小時。這是我的jsfiddle，所以你可以親眼看到。提前致謝。Array幻燈片不能正常工作使用javascript

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

來源

2014-05-08 user3533049

你有使用純CSS完成調整大小的問題，還是這種某種polyfill？ –

似乎無法讓它與純CSS一起工作認爲這更簡單？特別是調整圖像中心的大小 – user3533049

Javascript可能更具可定製性，並且更容易做到，但根據您嘗試修復的內容數量，它的速度要比在CSS中完成相同的速度要慢。您可以根據需要將Javascript更改爲類，但CSS中的過渡將始終更順暢。 –

於是我從頭開始颳起了這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; 
}

來源

2014-05-08 23:12:27

Array幻燈片不能正常工作使用javascript

回答

相關問題