第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

全部開發(fā)者教程

JavaScript 入門教程

然冬 · 更新于 2020-07-21

swiper

Swiper 常用于移動端網(wǎng)站的內(nèi)容觸摸滑動
Swiper 是純 JavaScript 打造的滑動特效插件，面向手機、平板電腦等移動終端。

swiper.js 在國內(nèi)使用面非常廣，可以用于實現(xiàn)輪播、圖片預覽、可滾動應(yīng)用等，發(fā)揮想象可是實現(xiàn)諸多需求。

本篇幅采用 swiper5，所有版本的 api 都很相似，主要區(qū)別可以參考官方的提供的說明。

1. 使用

實例演示
預覽 復制
復制成功！
<style>
  .container {height: 100px;overflow: hidden;}
  .slide-item {display: flex;justify-content: center;align-items: center;color: white;font-size: 42px;}
  .item1 {background-color: cornflowerblue;}
  .item2 {background-color: darkslateblue;}
  .item3 {background-color: darkorange;}
</style>

<div class="container">
  <div class="swiper-wrapper">
    <div class="swiper-slide slide-item item1">第一屏</div>
    <div class="swiper-slide slide-item item2">第二屏</div>
    <div class="swiper-slide slide-item item3">第三屏</div>
  </div>
</div>
<link href="https://cdn.bootcdn.net/ajax/libs/Swiper/5.4.5/css/swiper.min.css" rel="stylesheet">
<script src="https://cdn.bootcdn.net/ajax/libs/Swiper/5.4.5/js/swiper.min.js"></script>
<script>
  var mySwiper = new Swiper('.container', {
    autoplay: true, // 自動切頁
  });
</script>
運行案例 點擊 "運行案例" 可查看在線運行效果

swiper 需要引入兩個資源，通常和 UI 相關(guān)的框架都會有兩個及以上資源，需要額外引入樣式。

輪播是非常常見的需求，只需一些簡單的 DOM 結(jié)構(gòu)就可以完成。

.swiper-wrapper 和 .swiper-slide 兩個類是和 swiper 聯(lián)動的，swiper 在初始化的時候會在 swiper-wrapper 下 swiper-slide 作為每一項，這些類名都是可通過配置修改的。

2. 使用 swiper 實現(xiàn)移動端的圖片預覽

移動端產(chǎn)品的圖片查看幾乎都是全屏預覽，可以作用滑動切換圖，支持縮放手勢等，swiper 天然支持這些功能，同時又可以深度定制，適合制作業(yè)務(wù)組建嵌入項目。

分析一下需求：點擊圖片查看大圖，圖片可以手勢縮放，同時支持左右切換。

其實這就是一個不會自動切換的輪播，通過 swiper 就能實現(xiàn)。

可以設(shè)計一個方法，方法接收 當前圖片和所有圖片列表，然后每個圖片為一頁，生成一個輪播，顯示在頁面的最上層。

實例演示
預覽 復制
復制成功！
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
</head>
<body>
  <style>
    .container {position: fixed;top: 0;bottom: 0;right: 0;left: 0;background-color: rgba(0, 0, 0, .7);}
    .container .swiper-pagination {display: none;}
    .slide-item {overflow: hidden;}
    .slide-item img {width: 100%;}
    .count {position: absolute;left: 50%;transform: translateX(-50%);top: 16px;color: white;}
  </style>
  
  <link href="https://cdn.bootcdn.net/ajax/libs/Swiper/5.4.5/css/swiper.min.css" rel="stylesheet">
  <script src="https://cdn.bootcdn.net/ajax/libs/Swiper/5.4.5/js/swiper.min.js"></script>
  <script>
  function previewImage(current, list) {
    if (!list) list = [current]; // 如果沒傳，默認以初始圖為列表

    if (list.length === 0) list = [current]; // 如果數(shù)組為空 則以初始圖為列表
  
    var idx = 0; // 尋找初始圖在列表的位置
    var html = list.map(function(item, index) {
      if (item === current) { // 如果兩個圖 url 相等，則說明初始圖就是在這個位置
        idx = index + 1; // 記錄下位置
      }
  
      // 拼一個 swiper-slide
      return [
        '<div class="swiper-slide slide-item">',
          '<div class="swiper-zoom-container">', // 應(yīng)用縮放配置項要提供這個節(jié)點
            '<img src="' + item + '" />',
          '</div>',
        '</div>',
      ].join('');
    });
  
    var wrapper = document.createElement('div'); // 創(chuàng)建一個 swiper-wrapper

    wrapper.className = 'swiper-wrapper';
    wrapper.innerHTML = html.join(''); // 把所有 swiper-slide 塞進去
  
    var container = document.createElement('div'); // 創(chuàng)建跟節(jié)點
  
    container.className = 'container';
  
    // 把所有 html 拼起來
    container.innerHTML = [
      '<div class="count">',
        '<span class="current">' + (idx || 1) + '</span>',
        '/',
        '<span class="total">' + list.length + '</span>',
      '</div>',
      wrapper.outerHTML,
      '<div class="swiper-pagination"></div>',
    ].join('');

    // 添加到 DOM 中
    document.body.appendChild(container);

    // 實例化一個 swiper
    new Swiper(container, {
      zoom: true, // 縮放開啟
      loop: list.length > 1, // 如果圖片只有一張，則不開啟循環(huán)
      pagination: { // 分頁配置
        el: '.swiper-pagination',
      },
      on: { // 事件監(jiān)聽
        paginationUpdate: function(e) { // 當分頁發(fā)生變化的時候
          var idx = e.realIndex; // 拿到當前頁索引

          // 賦值給分頁計數(shù)器
          container.querySelector('.current').innerText = idx + 1;
        },
      },
    }).slideTo(idx, 0); // 默認展示初始圖
  }
  
  previewImage('https://img.mukewang.com/5ef94c8e000109e118720764.jpg', [
    'https://img.mukewang.com/5f057a6a0001f4f918720764.jpg',
    'https://img.mukewang.com/5ef94c8e000109e118720764.jpg',
    'https://img.mukewang.com/5ef15e4e00010b0018720764.jpg',
    'https://img.mukewang.com/5f0561160001630718720764.jpg',
  ]);
  </script>  
</body>
</html>
運行案例 點擊 "運行案例" 可查看在線運行效果

源碼沒有跳著走的邏輯，都加上了注釋，相對好理解。

這個圖片查看方法利用了 swiper 提供的滾動、手勢縮放、手勢拖動、分頁的能力，實現(xiàn)相對簡單，如果需要自己去實現(xiàn)相應(yīng)功能，就需要花費大量的經(jīng)歷。

圖片描述

3. 小結(jié)

swiper 本身的定位并不是輪播，輪播是其應(yīng)用場景之一，發(fā)揮想象，可以用 swiper 做許多事情。