原生頁面的輪播圖

阿新 • • 發佈：2021-01-03

原生頁面的基本應用

<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>輪播圖案例</title>
  <!-- 引入swiper的css樣式 -->
  <link rel="stylesheet" href="./node_modules/swiper/css/swiper.min.css" />
  <style>
   html,
   body {
    position: relative;
    height: 100%;
    }

   body {
    background: #eee;
    font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
    font-size: 14px;
    color: #000;
    margin: 0;
    padding: 0;
    }

   .swiper-container {
    width: 100%;
    height: 100%;
    }

   .swiper-slide {
    text-align: center;
    font-size: 18px;
    background: #fff;

    /* Center slide text vertically */
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
    }
  </style>
 </head>
 <body>
  <!-- Swiper -->
  <div class="swiper-container">
   <div class="swiper-wrapper">
    <div class="swiper-slide">
     <img
      src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=121352583,3553479540&fm=26&gp=0.jpg"
      alt=""
     />
    </div>
    <div class="swiper-slide">
     <img
      src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1605758811500&di=d838cb4af58e259d63ea0453b392426f&imgtype=0&src=http%3A%2F%2Fa3.att.hudong.com%2F16%2F18%2F300000932954129238184537620_950.jpg"
      alt=""
     />
    </div>
    <div class="swiper-slide">
     <img
      src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=3939918100,3247939377&fm=26&gp=0.jpg"
      alt=""
     />
    </div>
    <div class="swiper-slide">
     <img
      src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3446442004,2207547936&fm=26&gp=0.jpg"
      alt=""
     />
    </div>
   </div>
   <div class="swiper-pagination"></div>
   <!--分頁器。如果放置在swiper-container外面，需要自定義樣式。-->
  </div>

  <!-- 邏輯互動 -->
  <script src="./node_modules/swiper/js/swiper.min.js"></script>
  <script>
   let swiper = new Swiper(".swiper-container", {
    loop: true, //迴圈播放
    //autoplay:true //自動切換，如果不設定時間，預設是三秒切換
    autoplay: {
     //自定義配置
     delay: 2000, //時間毫秒制
     },
    pagination:{
      el:'.swiper-pagination'//元素，你的分頁的位置
     }
    });
  </script>
 </body>
</html>

原生js輪播圖

先寫結構：最外層的div設定相對定位，其下一級子元素設定絕對定位。 <div id=\"box\">

JS原生實現輪播圖的幾種方法

輪播圖主要思想就是：在大的容器裡，裝著一個很長的表，表是容器寬度的整數倍。

原生JavaScript輪播圖實現方法

本文例項為大家分享了輪播圖的實現方法，供大家參考，具體內容如下效果截圖：

原生頁面的輪播圖

原生頁面的基本應用 <!DOCTYPE html><html lang=\"en\"> <head><meta charset=\"UTF-8\" /><meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" /><title