Css3实现图片轮播

Html

Css

Js

    

        

1
            
2
            
3
            
4
        

#frame { position:absolute; width:300px; height:200px; overflow:hidden; border-radius:5px } #dis { position:absolute; left:-50px; top:-10px; opacity:.5 } #dis li { display:inline-block; width:200px; height:20px; margin:0 50px; float:left; text-align:center; color:#fff; border-radius:10px; background:#000 } #photos img { float:left; width:300px; height:200px } #photos { position:absolute; z-index:9; width:calc(300px * 4); /*---修改图片数量的话需要修改下面的动画参数*/ } .play { animation:ma 20s ease-out infinite alternate; } @keyframes ma { 0%,25% { margin-left:0px; } 30%,50% { margin-left:-300px; } 55%,75% { margin-left:-600px; } 80%,100% { margin-left:-900px; } }

↑上面代码改变，会自动显示代码结果

jQuery调用版本：1.11.3

通过css3和div实现图片轮播，不用应用js和jquery，避免一些网站不兼容的问题，代码量小，方便操作。

@keyframes ma {
         0%,25% {margin-left: 0px;}
         30%,50% {margin-left: -300px;}
         55%,75% {margin-left: -600px;}
         80%,100% {margin-left: -900px;}
}

更改图片大小时，更改图片的宽高和此处代码即可。

#photos {
    position:absolute;
    z-index:9;
    width:calc(300px * 4);
}
.play {
    animation:ma 20s ease-out infinite alternate;
}

修改滚动的速度