Question

写了一些javascript（非常新的这个）来居中div并使其全屏调整，就像窗口一样，工作正常但现在我添加了一些我在网上发现的脚本使用数组从一个图像转换到另一个图像。他们似乎互相矛盾搞乱动画，最大的问题是当我调整窗口大小时。这是我的jsfiddle所以你可以自己看看。提前谢谢。

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在类之间转换，以在图片之间切换。

基本上这只会推动＆＃34;活跃＆＃34;如果第一张图片被设置为＆＃34;活动＆＃34;类。

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

数组幻灯片显示与javascript无法正常工作

1 个答案: