jquery - 自动图像 slider 在桌面上工作，但在移动设备上不工作

Question

下面的代码是我的自动图片幻灯片的 html。它在桌面版本中工作正常。但在移动设备中不工作

<div id="slider1">
    <figure>
        <img src="${context:layout/images/action1.jpeg}"/>
        <img src="${context:layout/images/action2.jpeg}"/>
        <img src="${context:layout/images/action3.jpeg}"/>
        <img src="${context:layout/images/action4.jpeg}"/>
        <img src="${context:layout/images/action5.jpeg}"/>
    </figure>
</div>

此 android 设备的 css

@keyframes slidy {
    0%  { left: 0%; }
    20% { left: 0%; }
    25% { left: -100%; }
    45% { left: -100%; }
    50% { left: -200%; }
    70% { left: -200%; }
    75% { left: -300%; }
    95% { left: -300%; }
    100% { left: -400%; }
}

此 css 用于 iphone 设备

@-webkit-keyframes slidy {
    0%  { left: 0%; }
    20% { left: 0%; }
    25% { left: -100%; }
    45% { left: -100%; }
    50% { left: -200%; }
    70% { left: -200%; }
    75% { left: -300%; }
    95% { left: -300%; }
    100% { left: -400%; }
}

自动图片幻灯片的CSS

div#slider1 { 
    overflow: hidden; 
}
div#slider1 figure img { 
    width: 20%; 
    float: left; 
    height: 150px;
}
div#slider1 figure { 
    position: relative;
    width: 500%;
    margin: 0;
    left: 0;
    text-align: left;
    font-size: 0;
    animation: 30s slidy infinite; 
}

Answer 1

属性 animation: 30s slidy infinite; 在 webkit (chrome/safari) 中没有前缀就不能工作，所以你需要添加 -webkit-animation: 30s slidy infinite;