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

这款适用于iphone设备的CSS

@-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

如果没有webkit（chrome / safari）中的prefrix，属性animation: 30s slidy infinite;无效，因此您需要添加-webkit-animation: 30s slidy infinite;

自动图像滑块在桌面上工作，但它不能在移动设备中工作

1 个答案: