只使用css实现轮播图简单的操作
1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <title>Document</title> 8 <style> 9 * { 10 margin: 0; 11 padding: 0; 12 } 13 14 ul, 15 ol { 16 list-style: none; 17 } 18 19 .box { 20 overflow: hidden; 21 position: relative; 22 width: 520px; 23 height: 280px; 24 margin: 100px auto; 25 } 26 27 ul { 28 height: 100%; 29 width: 2080px; 30 animation: move 20s infinite; 31 animation-timing-function: cubic-bezier(0, 1, 0, 0.99); 32 animation-delay: 2s; 33 } 34 35 li { 36 float: left; 37 } 38 39 @keyframes move { 40 0% { 41 transform: translateX(0px); 42 } 43 25% { 44 transform: translateX(-520px); 45 } 46 50% { 47 transform: translateX(-1040px); 48 } 49 75% { 50 transform: translateX(-1560px); 51 } 52 /* 100% { 53 transform: translateX(-2080px); 54 } */ 55 } 56 57 ol { 58 position: absolute; 59 left: 50%; 60 bottom: 12px; 61 transform: translateX(-50%); 62 width: 70px; 63 height: 13px; 64 text-align: center; 65 background-color: rgba(255, 255, 255, .6); 66 border-radius: 7px; 67 } 68 69 ol li { 70 float: left; 71 width: 8px; 72 height: 8px; 73 background-color: #fff; 74 margin: 2.5px 3px; 75 border-radius: 50%; 76 cursor: pointer; 77 } 78 </style> 79 </head> 80 81 <body> 82 <div class="box"> 83 <ul> 84 <li> 85 <a href="#"> 86 <img src="upload/轮1.jpg" alt=""> 87 </a> 88 </li> 89 <li> 90 <a href="#"> 91 <img src="upload/轮2.jpg" alt=""> 92 </a> 93 </li> 94 <li> 95 <a href="#"> 96 <img src="upload/3.jpg" alt=""> 97 </a> 98 </li> 99 <li> 100 <a href="#"> 101 <img src="upload/4.jpg" alt=""> 102 </a> 103 </li> 104 </ul> 105 <ol> 106 <li></li> 107 <li></li> 108 <li></li> 109 <li></li> 110 <li></li> 111 </ol> 112 </div> 113 </body> 114 115 </html>