首页>>焦点图>>原生js轮播图(2022-04-13)

原生js轮播图

原生js轮播图
演示
下载
赞赏支持
立刻微信赞赏支持 关闭

 

XML/HTML Code
  1. <div class="banner">  
  2.        <div class="prev"><</div>  
  3.        <div class="next">></div>  
  4.        <ul>  
  5.            <li><a href="javacsript:;"><img src="../dalian.jpg" alt=""></a></li>  
  6.            <li><a href="javacsript:;"><img src="../dandong.jpg" alt=""></a></li>  
  7.            <li><a href="javacsript:;"><img src="../sanya.jpg" alt=""></a></li>  
  8.            <li><a href="javacsript:;"><img src="../dandong.jpg" alt=""></a></li>  
  9.        </ul>  
  10.        <div class="gd">  
  11.        </div>  
  12.    </div>  

 

CSS Code
  1. <style>  
  2.         * {  
  3.             margin: 0;  
  4.             padding: 0;  
  5.             box-sizing: border-box;  
  6.         }  
  7.   
  8.         .banner {  
  9.             position: relative;  
  10.             overflow: hidden;  
  11.             margin: 90px auto;  
  12.             width: 520px;  
  13.             height: 280px;  
  14.             background-color: aqua;  
  15.             border-radius: 12px;  
  16.         }  
  17.   
  18.         li {  
  19.             list-style: none;  
  20.         }  
  21.   
  22.         .banner ul {  
  23.             position: absolute;  
  24.             top: 0;  
  25.             left: 0;  
  26.         }  
  27.   
  28.         .banner ul li {  
  29.             float: left;  
  30.         }  
  31.   
  32.         .banner ul li a img {  
  33.             display: block;  
  34.             width: 520px;  
  35.             height: 280px;  
  36.         }  
  37.   
  38.         .banner .prev,  
  39.         .banner .next {  
  40.             display: none;  
  41.             z-index: 2;  
  42.             position: absolute;  
  43.             width: 50px;  
  44.             height: 35px;  
  45.             line-height: 35px;  
  46.             border-radius: 17.5px;  
  47.             top: 50%;  
  48.             background-color: rgba(0, 0, 0, .2);  
  49.             color: #fff;  
  50.             font-size: 18px;  
  51.             font-weight: 700;  
  52.         }  
  53.   
  54.         .banner .prev {  
  55.             left: 0;  
  56.             transform: translate(-50%, -50%);  
  57.             text-indent: 28px;  
  58.         }  
  59.   
  60.         .banner .next {  
  61.             rightright: 0;  
  62.             transform: translate(50%, -50%);  
  63.             text-indent: 8px;  
  64.         }  
  65.   
  66.         .banner .prev:hover,  
  67.         .banner .next:hover {  
  68.             background-color: rgba(0, 0, 0, .3);  
  69.         }  
  70.   
  71.         .banner .gd {  
  72.             position: absolute;  
  73.             left: 50%;  
  74.             bottombottom: 20px;  
  75.             margin-left: -36.5px;  
  76.             display: flex;  
  77.             justify-content: space-around;  
  78.             width: 75px;  
  79.             height: 15px;  
  80.             border-radius: 8px;  
  81.             background-color: #ffffff4d;  
  82.         }  
  83.   
  84.         .banner .gd i {  
  85.             display: block;  
  86.             width: 10px;  
  87.             height: 10px;  
  88.             border-radius: 50%;  
  89.             margin-top: 2.5px;  
  90.             background-color: azure;  
  91.         }  
  92.   
  93.         .current {  
  94.             background-color: #ff5000 !important;  
  95.             width: 15px !important;  
  96.             height: 9px !important;  
  97.             border-radius: 4.5px !important;  
  98.         }  
  99.     </style>  

 


原文地址:http://www.freejs.net/article_jiaodiantu_935.html