纯CSS焦点轮播效果-功能可扩展

时间：2023-11-18 22:52:47

个人博客：

http://mcchen.club

纯CSS3实现模拟焦点轮播效果，支持JQ等扩展各项功能。废话少说，直接贴代码。

 <!DOCTYPE html>

 <html>

 <head>

     <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1">

     <meta name="format-detection" content="telephone=no"/>

     <meta name="apple-mobile-web-app-capable" content="yes"/>

     <meta charset="UTF-8">

     <title>纯CSS焦点轮播</title>

     <link rel="stylesheet" href="css/index.css"/>

 </head>

 <body>

     <div class="focus_img">

         <ul class="img_list">

             <li><img src="data:images/swape1.jpg" alt=""/></li>

             <li><img src="data:images/swape2.jpg" alt=""/></li>

             <li><img src="data:images/swape3.jpg" alt=""/></li>

             <li><img src="data:images/swape4.jpg" alt=""/></li>

             <li><img src="data:images/swape5.jpg" alt=""/></li>

         </ul>

         <ul class="img_index">

             <li class="one">1</li>

             <li class="two">2</li>

             <li class="three">3</li>

             <li class="four">4</li>

             <li class="five">5</li>

         </ul>

     </div>

 </body>

 <script src="js/jquery-1.11.3.js"></script>

 <script src="js/index.js"></script>

 </html>

接下来是样式代码

 body {  background-color: #f0f0f0;  }

 .focus_img { position: relative; height: 300px; width: 500px; overflow: hidden; margin: auto; border: solid 2px #000000;

   ul { position: absolute;  }

   .img_list { top:; left:; -webkit-animation: img_list 10s 2s infinite;

     li { width: 500px; height: 300px; overflow: hidden;

       img { height: 300px; width: 500px;}

     }

   }

   .img_index { bottom: 10px;right: 10px;

     li {float: left; width: 16px; height: 16px; border: solid 1px #cccccc; background-color: #ffffff; color:#000000; text-align: center;line-height: 16px;overflow: hidden;cursor: pointer;margin-right: 2px;  }

     .one { background-color: #000000; color: #ffffff; -webkit-animation: one 10s 2s infinite;}

     .two { -webkit-animation: two 10s 2s infinite;}

     .three {-webkit-animation: three 10s 2s infinite;}

     .four {-webkit-animation: four 10s 2s infinite;}

     .five {-webkit-animation: five 10s 2s infinite;}

   }

 }

 @-webkit-keyframes img_list {

   0%{ -webkit-transform: translate(0,0);}

   10%,20% {-webkit-transform: translate(0,-300px);}

   30%,40% {-webkit-transform: translate(0,-600px);}

   50%,60% {-webkit-transform: translate(0,-900px);}

   70%,80% {-webkit-transform: translate(0,-1200px);}

   90%,100% {-webkit-transform: translate(0,0);}

 }

 @-webkit-keyframes one {

   10%,20%,30%,40%,50%,60%,70%,80%{ background-color: #ffffff; color: #000000;}

   0%,90%,100%{ background-color: #000000;color: #ffffff;}

 }

 @-webkit-keyframes two {

   0%,30%,40%,50%,60%,70%,80%,90%,100%{ background-color: #ffffff; color: #000000;}

   10%,20%{ background-color: #000000;color: #ffffff;}

 }

 @-webkit-keyframes three {

   0%,10%,20%,50%,60%,70%,80%,90%,100%{ background-color: #ffffff; color: #000000;}

   30%,40%{ background-color: #000000;color: #ffffff;}

 }

 @-webkit-keyframes four {

   0%,10%,20%,30%,40%,70%,80%,90%,100%{ background-color: #ffffff; color: #000000;}

   50%,60%{ background-color: #000000;color: #ffffff;}

 }

 @-webkit-keyframes five {

   0%,10%,20%,30%,40%,50%,60%,90%,100%{ background-color: #ffffff; color: #000000;}

   70%,80%{ background-color: #000000;color: #ffffff;}

 }

最后是效果图

纯CSS焦点轮播效果-功能可扩展

欢迎交流指正，谢谢！

相关文章