CSS3 slider
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=Edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0"> <title>CSS3 Slider</title> <style type="text/css"> .sliderBox{height:100%;position:relative;overflow: hidden;} .slider{position:absolute;width:100%;height:100%;} .slider li{position:absolute;top:0;left:0;width:100%;height:100%; border:solid 1px #ccc;background:#eee; } .slider li:nth-of-type(2){left:100%;} .slider li:nth-child(3){left:200%;} .slider li img{height:80px;} .slider li img.img2{height:100%;} .slider li span{display:inline-block;width:120px;height:80px;} .animate-slider{ animation: slider 12s linear infinite 0s alternate; -webkit-animation: slider 12s linear infinite 0s alternate; } /* @keyframes slider { 0% {left:0;} 25%{left:0;} 33.3%{left:-100%;} 66.6%{left:-100%;} 75%{left:-200%;} 100%{left:-200%} } @-webkit-keyframes slider { 0% {left:0;} 25%{left:0;} 33.3%{left:-100%;} 66.6%{left:-100%;} 75%{left:-200%;} 100%{left:-200%} } */ @keyframes slider { 0% {transform:translateX(0);} 25%{transform:translateX(0)} 33.3%{transform:translateX(-100%);} 66.6%{transform:translateX(-100%);} 75%{transform:translateX(-200%);} 100%{transform:translateX(-200%);} } @-webkit-keyframes slider { 0% {-webkit-transform:translateX(0);} 25%{-webkit-transform:translateX(0)} 33.3%{-webkit-transform:translateX(-100%);} 66.6%{-webkit-transform:translateX(-100%);} 75%{-webkit-transform:translateX(-200%);} 100%{-webkit-transform:translateX(-200%);} } </style> </head> <body> <section style="margin-top: 50px;height:300px;"> <div style="position:fixed;top:0;left:0;height:50px;width:100%;background: #dcc;">黑色3</div> <div class="sliderBox"> <ul class="slider animate-slider"> <li> <a href='' ><img src="images/1.jpg" alt=""/></a> <span>jjjjjoooooooooooooooooo jjjj</span> </li> <li> <a><img class='img2' src="images/2.jpg" alt=""/> </a> <span>hh777777777777</span> </li> <li> <a><img src="images/3.jpg" alt=""/></a> <span>hh777777777777h</span> </li> </ul> </div> </section> </body> </html>

更多精彩