純 CSS 實現滑動輪播圖效果

本文轉載自查看原文 2020-06-22 15:38 822 CSS 3 輪播圖/ CSS3

只使用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>

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 jQuery 簡單滑動輪播圖效果原生JS實現滑動輪播圖 js之原生實現移動端手指滑動輪播圖效果 JS實現移動端可滑動輪播圖 JS實現自動輪播圖效果(自適應屏幕寬度+手機觸屏滑動) JS實現自動輪播圖效果（js案例） [JavaScript]使用CSS + jQuery 實現自動輪播圖純CSS手動滑動輪播圖（隱藏滾動條） JS實現自動輪播效果：滑動輪播圖實現最后一張圖片無縫銜接第一張圖片