为什么这个幻灯片在到达结尾时会改变转换时间?

时间:2015-05-22 18:42:40

标签: javascript slideshow transition

您好我做了一个基本的幻灯片,每隔几秒就会滑动一次。

我已经在if语句中抛出这个回到开头,为什么我不能让它更快回到起点?它似乎只停留在原来的过渡时期?

var level = -300;

function slideshow() {
    var cont = document.getElementById('container');
    cont.style.transitionDuration = "3s";
    cont.style.transform = "translate(-0px," + level + "px)";
    level = level - 300;

    if (level == -900) {
        flipback()
    }
}

function flipback() {
    level = 0;
    cont.style.transitionDuration = "1s";
    cont.style.transform = "translate(-0px," + level + "px)";
    slideshow();
}

setInterval(slideshow, 6000)
body {
    padding:0px;
    margin:0px;
}
#display {
    width:450px;
    height:300px;
    overflow:hidden;
    margin:150px 450px;
}
#container {
}
#container img {
    height:300px;
    width:450px;
    padding-right:0px;
    float:left;
}
<div id="display">
    <div id="container">
        <img src="http://placehold.it/50x50" />
        <img src="http://placehold.it/100x100" />
        <img src="http://placehold.it/150x150" />
    </div>
</div>

https://jsfiddle.net/xwLyn0t4/#&togetherjs=HwEh0cnDCy

0 个答案:

没有答案