原生js系列之無限循環(huán)輪播組件

劉玉平發(fā)布于2019-08-29 14:02 / 3378人閱讀

摘要：沒有看過上一篇文章的話，可以在這里找到原生系列之工廠模式。那么這篇文章，我們將基于上述的，從頭開始寫一個(gè)無限循環(huán)輪播圖的組件。附無限循環(huán)輪播圖示例本文源碼

前情回顧

在上一篇文章中，我們封裝了一個(gè)DOM庫（qnode），為了讓大家直觀地感受到其方便友好的自定義工廠模式，于是給大家?guī)砹诉@篇文章。

沒有看過上一篇文章的話，可以在這里找到：原生js系列之DOM工廠模式。

那么這篇文章，我們將基于上述的qnode，從頭開始寫一個(gè)無限循環(huán)輪播圖的組件。

思路講解

先看一張輪播布局圖：

滑動(dòng)的時(shí)候，整個(gè)輪播容器整體前進(jìn)或后退一格，通過css3過渡效果的設(shè)置，來達(dá)到滑動(dòng)的效果。也許你會(huì)疑惑，頭尾怎么會(huì)多出兩張圖呢？

其實(shí)無限循環(huán)輪播的核心就在于頭尾多出的兩張圖，從圖三再向后滑動(dòng)，會(huì)滑到紅色圖一（我稱之為占位圖一），這個(gè)時(shí)候給用戶的感覺就是無縫從最后一張滑動(dòng)到第一張的，當(dāng)他滑到占位圖一時(shí)，我們再瞬間切換到粉色圖一（即真正的圖一），由于是瞬間變換，用戶是感知不到的。同理，從圖一滑到圖三也一樣。由此，周而復(fù)始，無窮無盡，給人的感覺是永遠(yuǎn)也不會(huì)到盡頭，當(dāng)然個(gè)中奧妙只有我們知道哈哈。

目錄結(jié)構(gòu)

swiper
├── README.md
├── index.js
├── qnode
│?? ├── index.js
│?? ├── method.js
│?? └── store.js
├── render
│?? ├── index.js
│?? ├── indicator.js
│?? └── list.js
└── styles
    ├── indicator.mcss
    ├── list.mcss
    └── wrap.mcss

說明：mcss文件是通過css-modules來編譯的，給class名稱生成唯一標(biāo)識(shí)，防止命名沖突。這里有我配置好的一套腳手架，覺得webpack配置麻煩的話，可以clone我這個(gè)項(xiàng)目來編譯代碼：webpack-build。

代碼編寫

index.js

import qnode from "./qnode"
import render from "./render"

const defaults = {
  initIndex: 1,
  autoplay: {
    use: true,
    delay: 3000
  },
  slide: {
    use: true,
    scale: 1 / 3,
    speed: 0.2
  },
  indicator: {
    use: true,
    bottom: "",
    dotClass: "",
    dotActiveClass: ""
  }
}

export default function swiper (node, {
  datas,
  initIndex,
  slide,
  autoplay,
  indicator
}) {
  if (!node || !datas || !datas.length) return

  // 儲(chǔ)存數(shù)據(jù)的前后順序很重要，一定要在調(diào)用前設(shè)置
  qnode.setStore("datas", datas)
  qnode.setStore("index", (initIndex || defaults.initIndex) - 1)
  qnode.setStore("slide", Object.assign({}, defaults.slide, slide))
  qnode.setStore("autoplay", Object.assign({}, defaults.autoplay, autoplay))
  qnode.setStore("indicator", Object.assign({}, defaults.indicator, indicator))

  // 渲染dom并儲(chǔ)存在qnode，以便后續(xù)的獲取和操作
  render()

  // 自動(dòng)輪播
  qnode.execMethod("autoplay")
  // 滑動(dòng)翻頁
  qnode.execMethod("slide")

  // 掛載到真實(shí)的節(jié)點(diǎn)上
  qnode.getNode("wrap").appendTo(node)
}

render/index.js

import qnode from "../qnode"
import renderList from "./list"
import renderIndicator from "./indicator"

import mcss from "../styles/wrap.mcss"

export default function () {
  renderList() // 渲染列表
  renderIndicator() // 渲染指示器，若沒有開啟則不會(huì)渲染

  qnode.setNode("wrap", "$div")
    .addClass(mcss.wrap)
    .append([
      qnode.getNode("list"),
      qnode.getNode("indicator") // 有可能沒有值，這一層我們的qnode會(huì)過濾調(diào)，所以放心大膽地寫
    ])
}

render/list.js

import { isElement, isString } from "@m/utils/is"
import qnode from "../qnode"

import mcss from "../styles/list.mcss"

function getItemNode (data) {
  const qItem = qnode.q("$div").addClass(mcss.item)

  if (isElement(data)) {
    return qItem.append(data)
  }

  if (isString(data)) {
    return qItem.html(data)
  }

  return qItem.html(`
    
      
    
  `)
}

export default function () {
  const datas = qnode.getStore("datas")
  const tdTime = qnode.getStore("tdTime")
  const posIndex = qnode.getStore("index") + 1

  const qItems = datas.map(item => getItemNode(item))

  // 首位多插入一個(gè)節(jié)點(diǎn)，用于視覺感知，交互完成后瞬間替換到相應(yīng)的節(jié)點(diǎn)
  qItems.unshift(getItemNode(datas[datas.length - 1]))
  qItems.push(getItemNode(datas[0]))

  qnode.setNode("list", "$div")
    .addClass(mcss.list)
    .style({
      transitionDuration: tdTime + "ms",
      transform: `translateX(${posIndex * -100}%)`
    })
    .append(qItems)
}

render/indicator.js

import qnode from "../qnode"

import mcss from "../styles/indicator.mcss"

export default function () {
  const indicator = qnode.getStore("indicator")
  const last = qnode.getStore("datas").length - 1
  const index = qnode.getStore("index")
  const dotClass = indicator.dotClass || mcss.dot
  const dotActiveClass = indicator.dotActiveClass || mcss.dotActive

  if (indicator.use) {
    let qDots = []
    for (let i = 0; i <= last; i++) {
      qDots.push(
        qnode.q("$div").addClass(dotClass, (i === index) && dotActiveClass)
      )
    }

    qnode.setNode("dots", qDots)
    qnode.setStore("dotActiveClass", dotActiveClass)
    qnode.setNode("indicator", "$div")
      .addClass(mcss.indicator)
      .style("bottom", indicator.bottom)
      .append(qDots)
  }
}

qnode/index.js

import { QNode } from "@m/qnode"
import { tdTime } from "./store"
import { change, autoplay, slide, indicator } from "./method"

const qnode = new QNode()

qnode.setStore("tdTime", tdTime)

qnode.setMethod("change", change)
qnode.setMethod("autoplay", autoplay)
qnode.setMethod("slide", slide)
qnode.setMethod("indicator", indicator)

export default qnode

qnode/store.js

// 靜態(tài)數(shù)據(jù)可以放在這里
export const tdTime = 500

qnode/method.js

import touchSlide from "./touchSlide"

// 翻頁處理
export function change (isNext) {
  let index = this.getStore("index")
  let cacheIndex = index // 用于記錄上一次的索引，移除指示器激活樣式時(shí)使用
  let last = this.getStore("datas").length - 1
  let tdTime = this.getStore("tdTime")
  let qList = this.getNode("list")
  let isNextContinue = isNext && (index === last)
  let isPrevContinue = !isNext && (index === 0)
  let posIndex = index + (isNext ? 2 : 0)

  if (isNextContinue || isPrevContinue) {
    // 滑到占位圖
    qList.style("transform", `translateX(${posIndex * -100}%)`)
    index = isNextContinue ? 0 : last

    setTimeout(() => {
      qList.style({
        transitionDuration: "0ms",
        transform: `translateX(${(index + 1) * -100}%)`
      })
    }, tdTime)
  } else {
    qList.style({
      transitionDuration: tdTime + "ms",
      transform: `translateX(${posIndex * -100}%)`
    })
    index += isNext ? 1 : -1
  }

  this.setStore("index", index)
  this.execMethod("indicator", cacheIndex, index)
}

// 自動(dòng)輪播
export function autoplay () {
  let opt = this.getStore("autoplay")

  if (!opt.use) return

  let timer = setInterval(() => {
    this.execMethod("change", true)
  }, opt.delay)

  this.setStore("timer", timer)
}

// 滑動(dòng)處理
export function slide () {
  let qWrap = this.getNode("wrap")
  let qList = this.getNode("list")
  let tdTime = this.getStore("tdTime")
  let slideData = this.getStore("slide")
  let self = this

  if (!slideData.use) return

  touchSlide(qWrap.current(), {
    delay: 0,
    start () {
      // 清除輪播定時(shí)器和css3過渡效果
      clearTimeout(self.getStore("timer"))
      qList.style("transitionDuration", "0ms")
    },
    move (info) {
      let posIndex = self.getStore("index") + 1
      let move = info.disX / qWrap.width() * 100
      let total = posIndex * -100 + move

      qList.style("transform", `translateX(${total}%)`)
    },
    end (info) {
      // 開啟輪播和css3過渡效果
      self.execMethod("autoplay")
      qList.style("transitionDuration", tdTime + "ms")

      let posIndex = self.getStore("index") + 1
      let scale = Math.abs(info.disX) / qWrap.width()
      let speed = Math.abs(info.speedX)

      if (scale >= slideData.scale || speed >= slideData.speed) {
        self.execMethod("change", info.disX < 0) // 翻頁
      } else {
        qList.style("transform", `translateX(${posIndex * -100}%)`)
      }
    }
  })
}

// 修改指示器索引
export function indicator (lastIndex, currIndex) {
  const qDots = this.getNode("dots")
  const dotActiveClass = this.getStore("dotActiveClass")

  if (qDots && dotActiveClass) {
    qDots[lastIndex].removeClass(dotActiveClass)
    qDots[currIndex].addClass(dotActiveClass)
  }
}

touchSlide.js

// 截流
function throttle (fn, delay = 100) {
  let wait = false

  return function () {
    if (!wait) {
      fn && fn.apply(this, arguments)
      wait = true

      setTimeout(() => {
        wait = false
      }, delay)
    }
  }
}

/**
 *
 * 滑動(dòng)
 * @param {HTMLElement} node
 * @param {Object} {
 *   delay = 100, // move截流時(shí)間
 *   start, // 滑動(dòng)開始
 *      參數(shù): pageX, pageY
 *   move, // 滑動(dòng)中，會(huì)不斷地觸發(fā)，可以通過截流來限制觸發(fā)頻率
 *      參數(shù):
            time, // 總時(shí)間:ms
            disX, // 總路程:px
            disY,
            addX, // 路程增量:px
            addY,
            speedX: disX / time, // 平均速度:px/ms
            speedY: disY / time
 *   end, // 滑動(dòng)結(jié)束，參數(shù)同move
 * }
 */
export default function (node, {
  delay = 100,
  start,
  move,
  end
}) {
  if (!node) return

  let sTouch, eTouch, sTime
  let touch, time, disX, disY, addX, addY

  node.addEventListener("touchstart", e => {
    e.preventDefault()

    sTime = e.timeStamp
    sTouch = eTouch = e.targetTouches[0]

    start && start({
      pageX: sTouch.pageX,
      pageY: sTouch.pageY
    })
  }, false)

  node.addEventListener("touchmove", throttle(e => {
    touch = e.targetTouches[0]
    time = e.timeStamp - sTime
    disX = touch.pageX - sTouch.pageX
    disY = touch.pageY - sTouch.pageY
    addX = touch.pageX - eTouch.pageX
    addY = touch.pageY - eTouch.pageY

    move && move({
      time, // 總時(shí)間:ms
      disX, // 總路程:px
      disY,
      addX, // 路程增量:px
      addY,
      speedX: disX / time, // 平均速度:px/ms
      speedY: disY / time
    })

    // 記錄上一次touch
    eTouch = touch
  }, delay), false)

  node.addEventListener("touchend", e => {
    touch = e.changedTouches[0]
    time = e.timeStamp - sTime
    disX = touch.pageX - sTouch.pageX
    disY = touch.pageY - sTouch.pageY
    addX = touch.pageX - eTouch.pageX
    addY = touch.pageY - eTouch.pageY

    end && end({
      time,
      disX,
      disY,
      addX,
      addY,
      speedX: disX / time,
      speedY: disY / time
    })
  }, false)
}

styles/wrap.mcss

.wrap {
  position: relative;
  overflow: hidden;
  transform: translate3d(0, 0, 0);
}

styles/list.mcss

.list {
  display: flex;
  flex-direction: row;
  transform: translateX(0);
  transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.item {
  flex-basis: 100%;
  flex-shrink: 0;
  box-sizing: border-box;

  a {
    display: block;
    font-size: 0;

    img {
      width: 100%;
      height: auto;
    }
  }
}

styles/indicator.mcss

.indicator {
  position: absolute;
  bottom: 1em;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
}

.dot {
  width: 1em;
  height: 0.12em;
  margin: 0 0.12em;
  background-color: rgba(255, 255, 255, 0.5);

  &-active {
    background-color: #fff;
  }
}

README 參數(shù)

node: 要掛載的dom節(jié)點(diǎn)，必須

options: 如下（其中datas是必要的）

{
  initIndex: 1, // 初始化展示的索引
  autoplay: { // 自動(dòng)輪播設(shè)置
    use: true, // 開關(guān)
    delay: 3000 // 間隔3s
  },
  slide: { // 手指滑動(dòng)設(shè)置
    use: true, // 開關(guān)
    scale: 1/3, // 劃過總共寬度的1/3則翻頁
    speed: 0.2 // 滑動(dòng)的速度超過0.2px/ms則翻頁，即快速滑動(dòng)也可以翻頁
  },
  indicator: { // 索引指示器設(shè)置
    use: true, // 開關(guān)
    bottom: "", // 底部的距離
    dotClass: "", // 自定義圓點(diǎn)樣式
    dotActiveClass: "" // 自定義激活樣式
  },
  datas: [ // 圖片數(shù)據(jù)
    {
      src: "xxx", // 圖片URL
      href: "/", // 圖片錨點(diǎn)，可以不設(shè)置
      target: "_blank" // 點(diǎn)擊錨點(diǎn)的跳轉(zhuǎn)處理（是在當(dāng)前頁打開還是新建窗口）
    }
  ]
}

示例

import swiper from "@c/swiper"

import img1 from "./images/1.jpg"
import img2 from "./images/2.jpg"
import img3 from "./images/3.jpg"
import img4 from "./images/4.jpg"
import img5 from "./images/5.jpg"
import img6 from "./images/6.jpg"

const rootNode = document.getElementById("root")

swiper(rootNode, {
  // initIndex: 1,
  // autoplay: {
  //   use: true,
  //   delay: 3000
  // },
  // slide: {
  //   use: true,
  //   scale: 1/3,
  //   speed: 0.2
  // },
  // indicator: {
  //   use: true,
  //   bottom: "",
  //   dotClass: "",
  //   dotActiveClass: ""
  // },
  datas: [
    {
      src: img1,
      href: "/",
      target: "_blank"
    },
    {
      src: img2,
      href: "/",
      target: "_blank"
    },
    {
      src: img3,
      href: "/",
      target: "_blank"
    },
    {
      src: img4,
      href: "/",
      target: "_blank"
    },
    {
      src: img5,
      href: "/",
      target: "_blank"
    },
    {
      src: img6,
      href: "/",
      target: "_blank"
    }
  ]
})

使用心得

總體來說使用qnode來開發(fā)的話還是比較方便的，文件拆分以及數(shù)據(jù)共享都可以做到，唯一有一點(diǎn)瑕疵的話，就是對于js執(zhí)行的順序要慎重考慮。想一想為什么render文件暴露出來的是函數(shù)，原因就是因?yàn)榇藭r(shí)數(shù)據(jù)還未儲(chǔ)存到qnode，因此通過函數(shù)來進(jìn)行惰性加載，在合適的地方執(zhí)行。

對于qnode，目前還沒有錯(cuò)誤提醒，調(diào)用方式不對的話沒有信息吐出，后續(xù)可以考慮補(bǔ)上這個(gè)功能，畢竟其他開發(fā)者用的話，可能并不熟悉API，調(diào)用姿勢不對也是有可能發(fā)生的。

以上就是本文的全部內(nèi)容了。

附：

無限循環(huán)輪播圖示例

本文源碼

GPU云服務(wù)器云服務(wù)器原生JS實(shí)現(xiàn)輪播原生js橫向輪播旋轉(zhuǎn) 系列之系列之二

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/112873.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

劉玉平

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

【歷年域名交易盤點(diǎn)】2018年TOP10！終端收購需求明顯增多

閱讀 3691·2021-11-19 09:56
主機(jī)扣款失敗怎么辦-高速etc扣費(fèi)失敗怎么處理？

閱讀 1473·2021-09-22 15:11
一個(gè)div分上下兩部分，上部分高度不固定，下面部分自動(dòng)填滿剩余高度

閱讀 1133·2019-08-30 15:55
原生js系列之無限循環(huán)輪播組件

閱讀 3379·2019-08-29 14:02
flex布局踩過的那些坑

閱讀 2917·2019-08-29 11:07
BeeFramework：以極客的方式開發(fā)你的應(yīng)用

閱讀 439·2019-08-28 17:52
VueCli3.0中集成MockApi

閱讀 3174·2019-08-26 13:59
一文教你構(gòu)建自己的library、webpack優(yōu)化和npm版本控制

閱讀 442·2019-08-26 13:53

国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長期優(yōu)惠，快來選購！

原生js系列之無限循環(huán)輪播組件

相關(guān)文章