Hello World

Lemonreds · Lemonreds · commit 2c4ff0598674 · 2019-03-06T23:55:42.000+08:00
diff --git a/store.js b/store.js
diff --git a/swiper/index.html b/swiper/index.html
@@ -0,0 +1,55 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <title>Swiper</title>
+</head>
+<style>
+    body {
+        margin: 0;
+        padding: 0;
+        overflow: hidden;
+    }
+
+    #container {
+        width: 100vw;
+        height: 100vh;
+    }
+
+    section {
+        width: 100%;
+        height: 100%;
+        text-align: center;
+        font-size: 86px;
+        line-height: 100vh;
+        color: white;
+    }
+</style>
+
+<body>
+    <div id="container">
+        <section style="background:brown">1</section>
+        <section style="background:green">2</section>
+        <section style="background:gray">3</section>
+        <section style="background:brown">4</section>
+        <section style="background:lightcoral">5</section>
+        <section style="background:brown">6</section>
+    </div>
+</body>
+<script src="./swiper.js"></script>
+<script>
+    const container = document.getElementById('container')
+    const swiper = new Swiper(container, {
+        direction: 'x',
+        delay: '500'
+    })
+    swiper.toLast()
+    setTimeout(() => {
+        swiper.to(1)
+    }, 1500)
+</script>
+
+</html>
diff --git a/swiper/swiper.js b/swiper/swiper.js
@@ -0,0 +1,104 @@
+/**
+ * @method
+ * @param {function} cb
+ * @return {array}
+ */
+NodeList.prototype.filter = function (cb) {
+
+    if (typeof cb === 'function') {
+        let res = []
+        for (let i = 0; i < this.length; i++) {
+            if (cb(this[i])) {
+                res.push(this[i])
+            }
+        }
+        return res
+    }
+    return this
+}
+
+const defaultConfig = {
+    direction: 'x', // x | y
+    delay: 500
+}
+
+class Swiper {
+    constructor($container, config) {
+        // init reference
+        this.contianer = $container
+        this.config = Object.assign({}, defaultConfig, config)
+        this.pages = this.contianer.childNodes.filter(node => {
+            return node.nodeType === 1
+        })
+        // init page index
+        this.index = 1
+        this.length = this.pages.length
+
+        // intervalID hold
+        this.interval = null
+
+        // init styles
+        this.contianer.style.cssText += `position: relative; transform: translate3d(0, 0, 0); transition: all ${this.config.delay}ms ease 0s; `
+        this.pages.forEach((page, idx) => {
+            page.style.cssText +=
+                this.config.direction === 'y' ?
+                `position: absolute; top: ${idx*100}%; left: 0px;` :
+                `position: absolute; top: 0px; left: ${idx*100}%;`
+        })
+    }
+
+    to(index) {
+        // adjust
+        if (index > this.length) index = this.length
+        if (index < 1) index = 1
+        // cancel last slide
+        if (this.interval) clearInterval(this.interval)
+
+        // toNext
+        if (index > this.index) {
+            this.interval = setInterval(() => {
+                if (index > this.index) {
+                    this.contianer.style.cssText +=
+                        this.config.direction === 'y' ?
+                        `transform: translate3d(0px, -${this.index*100}%, 0px);` :
+                        `transform: translate3d(-${this.index*100}%, 0px, 0px);`
+                    this.index++
+                } else {
+                    clearInterval(this.interval)
+                }
+            }, this.config.delay)
+        }
+        // toPrevious
+        else if (index < this.index) {
+            this.interval = setInterval(() => {
+                if (index < this.index) {
+                    this.index--
+                    this.contianer.style.cssText +=
+                        this.config.direction === 'y' ?
+                        `transform: translate3d(0px, -${(this.index-1)*100}%, 0px);` :
+                        `transform: translate3d(-${(this.index-1)*100}%, 0px, 0px);`
+                } else {
+                    clearInterval(this.interval)
+                }
+            }, this.config.delay)
+        }
+    }
+
+    toNext() {
+        this.to(++this.index)
+    }
+
+    toPrevious() {
+        this.to(--this.index)
+    }
+
+    toFirst() {
+        this.to(1)
+    }
+
+    toLast() {
+        this.to(this.length)
+    }
+}
+
+exports = Swiper
