Question

我正在尝试制作一个JQuery幻灯片，每隔几秒就会旋转一组图像，并在完成后将roundlicins重新回到最初的一个。我正在使用CSS翻译，它应该在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。

幻灯片无法在默认缩放级别的Google Chrome中使用？

1 个答案: