#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; } }
通过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; }
修改滚动的速度