jquery - 在默认缩放级别下，幻灯片无法在 Google Chrome 中运行？

Question

我正在尝试制作一个 JQuery 幻灯片，它每隔几秒旋转一组图像，并在完成后循环回到初始图像。我正在使用 CSS Translation，从 2010 年起它应该可以在 Chrome 中使用，但它似乎对我不起作用。在 Firefox 和 IE 中有效，但在 Chrome 中无效。有趣的是，当我缩小或放大时，只需以任何方式更改缩放级别，它就会开始工作，而不是在页面加载时。这是为什么？

$(document).ready(function () {
    var i = 0;
    setInterval(slide, 1500);
    function slide() {
        $("#slider").css("transform", "translateX(" + $(this).index() * +(i * 1000) + "px)");
        if (i == 2) {
            i = 0;
        } else {
            i++;
        }
    }
});

#slider_container {
    width: 1000px;
    height: 300px;
    margin-bottom: 0.5em;
    overflow: hidden;
    margin-left: auto;
    margin-right: auto;
}
#slider {
    width: 3000px;
    -webkit-transition: all 1.0s ease-in-out;
    -moz-transition: all 1.0s ease-in-out;
    -o-transition: all 1.0s ease-in-out;
    transition: all 1.0s ease-in-out;
}
#slider img {
    padding: 0;
    margin: 0;
    float: left;
}
.bannered {
    max-width: 1000px;
    max-height: 300px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="slider_container">
    <div id="slider">
        <img src="http://i.imgur.com/6C1jhl0.png" class="bannered" alt="" />
        <img src="http://i.imgur.com/nTmz9LF.png" class="bannered" alt="" />
        <img src="http://i.imgur.com/qFZIvPr.png" class="bannered" alt="" />
    </div>
</div>

Answer 1

尝试将 position: relative; 添加到您的 #slider img。