first commit

历届学生/front-end-team-10/项目练习/学生项目/薛涛/2.28/swiperV2.js

@@ -0,0 +1,129 @@
+
+
+class Swiper {
+
+    defaultOption = {
+        TimeId: null,
+        autoPlay: false,
+        time: 1000,
+        initialSlide: 0, // 实现了
+        el: '.swiper',
+        on: {},
+        length: () => this._f(`.swiper_wrap li`).length,
+        width: () => this.$f(``).offsetWidth,
+        initSlideLeft: () => {
+            this.$f(".swiper_wrap").style.left = `${this.defaultOption.initialSlide * -this.defaultOption.width()
+                }px`
+        }
+    }
+
+    // 构造函数里面接受
+    constructor(el, option) {
+
+        if (el.length == 0 || this.$(el) == null) {
+            console.error(`类名:${el}不存在，请检查`);
+        } else {
+            this.defaultOption.el = el || this.defaultOption.el;
+            this.defaultOption.autoPlay = option.autoPlay || this.defaultOption.autoPlay;
+            this.defaultOption.time = option.time || this.defaultOption.time;
+            this.defaultOption.initialSlide = option.initialSlide || this.defaultOption.initialSlide;
+            if (option.hasOwnProperty("on")) {
+                this.defaultOption.on = option.on
+            }
+            this.init()
+        }
+
+    }
+
+    init() {
+        this.defaultOption.initSlideLeft()
+        if (this.$f(".button") != null) {
+            this.next()
+            this.prev()
+        }
+
+        this.defaultOption.autoPlay
+            ? this.autoPlay()
+            : ''
+
+        this.$f(".dot") == null ? '' : this.renderDot()
+
+    }
+
+    next() {
+        this.click(".right", (v) => this.sport(1))
+    }
+
+    prev() {
+        this.click(".left", v => this.sport(-1))
+    }
+
+
+    changeDotActive(i) {
+        this.defaultOption.on.slideChange && this.defaultOption.on.slideChange(i)
+
+        if (this.$f(".dot") != null) {
+            this._f(".dot li").forEach(val => val.classList.remove("active"))
+            this._f(".dot li")[i].classList.add("active")
+        }
+        this.$f(".swiper_wrap").style.left = `${i * -this.defaultOption.width()}px`
+    }
+
+    renderDot() {
+        for (var i = 0; i < this.defaultOption.length(); i++) {
+            this.$f(".dot").innerHTML += `
+             <li class="${i == this.defaultOption.initialSlide ? 'active' : ''}"></li>
+            `
+        }
+        this.click(".dot li", (v, i) => this.changeDotActive(i))
+    }
+
+    autoPlay() {
+        this.defaultOption.TimeId = setInterval(() => this.sport(1), this.defaultOption.time)
+        this.$f("").onmouseover = () => clearInterval(this.defaultOption.TimeId)
+        this.$f("").onmouseout = () => this.autoPlay()
+    }
+
+    sport(offset) {
+        this.defaultOption.initialSlide += offset
+
+        if (this.defaultOption.initialSlide < 0) {
+            this.defaultOption.initialSlide = 0
+        }
+        if (this.defaultOption.initialSlide > this.defaultOption.length() - 1) {
+            this.defaultOption.initialSlide = this.defaultOption.length() - 1
+        }
+        if (this.defaultOption.initialSlide >= 0 && this.defaultOption.initialSlide <= this.defaultOption.length() - 1) {
+            this.changeDotActive(this.defaultOption.initialSlide)
+        }
+    }
+
+    slideTo(index) {
+        this.changeDotActive(index)
+    }
+
+    click(className, callback) {
+        this._f(className).forEach((v, i) => v.onclick = () => callback(v, i))
+    }
+
+
+
+    $f(className) {
+        return this.$(`${this.defaultOption.el} ${className}`)
+    }
+
+    _f(className) {
+        return this._(`${this.defaultOption.el} ${className}`)
+    }
+
+
+
+    $(className) {
+        return document.querySelector(className)
+    }
+
+    _(className) {
+        return document.querySelectorAll(className)
+    }
+
+}

历届学生/front-end-team-10/项目练习/学生项目/薛涛/2.28/图片预览.css

@@ -0,0 +1,92 @@
+* {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+}
+
+.list img {
+    width: 100px;
+}
+
+.preview {
+    width: 100vw;
+    height: 100vh;
+    position: absolute;
+    left: 0;
+    top: 0;
+    z-index: 999;
+    overflow: hidden;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.preview .zz {
+    width: 100%;
+    height: 100%;
+    background: #000000c4;
+    z-index: -1;
+    position: absolute;
+}
+
+.preview .preview_img {
+   transition: all 0.5s;
+   user-select: none;
+   cursor: pointer;
+}
+
+.preview .icon-close {
+    position: absolute;
+    z-index: 2;
+    right: 10px;
+    top: 10px;
+    color: #fff;
+    font-size: 40px;
+}
+
+.preview .button {
+    position: absolute;
+    width: 100%;
+    top: 50%;
+    transform: translateY(-50%);
+    z-index: 2;
+    display: flex;
+    justify-content: space-between;
+    padding: 0 20px;
+    box-sizing: border-box;
+}
+
+.preview .button i {
+    color: #fff;
+    font-size: 25px;
+
+}
+
+.preview .icon {
+    z-index: 2;
+    position: absolute;
+    left: 50%;
+    transform: translateX(-50%);
+    bottom: 30px;
+    padding: 9px 10px;
+    background: #716f6fc4;
+    border-radius: 25px;
+    
+}
+
+.preview .icon i {
+    color: #fff;
+    font-size: 22px;
+    margin-right: 20px;
+    cursor: pointer;
+    user-select: none;
+}
+
+.preview .icon i:last-child {
+    margin-right: 0px;
+}
+
+.icon .right {
+    transform: rotateY(180deg);
+    display: inline-block;
+}

历届学生/front-end-team-10/项目练习/学生项目/薛涛/2.28/图片预览.html

@@ -0,0 +1,140 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <link rel="stylesheet" href="http://at.alicdn.com/t/c/font_3445167_gwp92uwquwa.css">
+    <link rel="stylesheet" href="./图片预览.css">
+
+</head>
+
+<body>
+    <div class="list">
+        <img src="https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg" alt="">
+    </div>
+
+
+</body>
+<script>
+
+    var scaleNum = 1, rotateNum = 0, startX = null, startY = null, offsetX = null, offsetY = null, Movestatus = true
+
+
+    _(".list img").forEach(v => {
+        v.onclick = () => {
+            $("body").insertAdjacentHTML("beforeend", `
+    <div class="preview">
+        <div class="zz"></div>
+        <img style="transform: scale(${scaleNum}) rotate(${rotateNum}deg);height:100%;margin-left:0px;margin-top:0px" class="preview_img" src="https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg" alt="">
+        <i class="iconfont icon-close"></i>
+        <div class="button">
+            <i class="iconfont icon-fanhui"></i>
+            <i class="iconfont icon-gengduo"></i>
+        </div>
+        <div class="icon">
+            <i class="iconfont icon-suoxiao"></i>
+            <i class="iconfont icon-fangda"></i>
+            <i class="iconfont  qp icon-quanping"></i>
+            <i class="iconfont icon-yulanxuanzhuan left"></i>
+            <i class="iconfont icon-yulanxuanzhuan right" ></i>
+        </div>
+    </div>`);
+            $(".icon-close").onclick = () => {
+                $("body").removeChild($(".preview"))
+            }
+
+            $(".icon-suoxiao").onclick = () => {
+                scaleNum = scaleNum - 0.2 < 0.2 ? 0.2 : scaleNum - 0.2
+                xuanzhuan()
+            }
+
+            $(".icon-fangda").onclick = () => {
+                scaleNum += 0.2
+                xuanzhuan()
+            }
+
+            $(".left").onclick = () => {
+                rotateNum -= 90
+                xuanzhuan()
+            }
+            $(".right").onclick = () => {
+                rotateNum += 90
+                xuanzhuan()
+            }
+            $(".icon-quanping").onclick = () => {
+
+                if ($(".qp").classList.contains("icon-quanping")) {
+                    $(".qp").classList.replace("icon-quanping", "icon-beijingyibiyi")
+                    $(".preview_img").style.height = "auto"
+                } else {
+                    $(".qp").classList.replace("icon-beijingyibiyi", "icon-quanping")
+                    $(".preview_img").style.height = "100%"
+                }
+            }
+            $(".preview_img").onmousedown = (e) => {
+                Movestatus = true
+                OldLeft = parseInt($(".preview_img").style.marginLeft)
+                OldTop = parseInt($(".preview_img").style.marginTop)
+                startX = e.x,
+                    startY = e.y
+
+
+                $(".preview_img").onmousemove = (e) => {
+
+                    MouseMove(e)
+
+                }
+
+
+                $(".preview_img").onmouseup = () => {
+                    Movestatus = false
+                    $(".preview_img").onmousemove = null
+                }
+            }
+
+            $(".preview_img").onmouseout = () => {
+                $(".preview").onmousemove = (e) => {
+                    if(Movestatus){
+                        MouseMove(e)
+                    }
+                 
+                }
+            }
+
+            $(".preview").onmouseup = () => {
+                Movestatus = false
+                $(".preview_img").onmousemove = null
+                $(".preview").onmousemove = null
+
+            }
+        }
+    })
+
+    function MouseMove(e) {
+        e.preventDefault()
+        var moveX = e.x, moveY = e.y
+        var offsetX = moveX - startX, offsetY = moveY - startY
+
+        $(".preview_img").style.marginLeft = ` ${offsetX + OldLeft}px`
+        $(".preview_img").style.marginTop = `${offsetY + OldTop}px`
+
+    }
+
+
+    function xuanzhuan() {
+        $(".preview_img").style.transform = `scale(${scaleNum}) rotate(${rotateNum}deg)`
+    }
+
+    function $(className) {
+        return document.querySelector(className)
+    }
+
+    function _(className) {
+        return document.querySelectorAll(className)
+    }
+</script>
+
+</html>

历届学生/front-end-team-10/项目练习/学生项目/薛涛/2.28/轮播图.html

@@ -0,0 +1,180 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <link rel="stylesheet" href="http://at.alicdn.com/t/c/font_3888527_7tklo9l16jl.css">
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+            list-style: none;
+        }
+
+        .swiper {
+            width: 630px;
+            height: 315px;
+            overflow: hidden;
+            position: relative;
+            margin: 100px auto;
+        }
+
+        .swiper .photo {
+            display: flex;
+            position: absolute;
+            transition: all 1s;
+        }
+
+        .swiper .photo li {}
+
+        .swiper .photo li img {
+            width: 630px;
+            height: 315px;
+        }
+
+        .swiper .button {
+            width: 100%;
+            position: absolute;
+            top: 50%;
+            display: flex;
+            justify-content: space-between;
+            transform: translateY(-50%);
+        }
+
+
+        .swiper .button i {
+            font-size: 30px;
+            color: black;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            width: 50px;
+            height: 50px;
+            cursor: pointer;
+        }
+
+        .swiper .dot {
+            position: absolute;
+            left: 50%;
+            transform: translateX(-50%);
+            bottom: -100px;
+            display: flex;
+        }
+
+        .swiper .dot li {
+            width: 13px;
+            height: 13px;
+            background: #fff;
+            border-radius: 100%;
+            margin-right: 10px;
+            cursor: pointer;
+        }
+
+        .swiper .dot li:last-child {
+            margin-right: 0px;
+        }
+
+        .swiper .dot .active {
+            background: red;
+        }
+    </style>
+</head>
+
+<body>
+    <div class="swiper">
+        <ul class="photo" style=" left: 0px;">
+            <li>
+                <img src="https://img.alicdn.com/imgextra/i4/6000000003174/O1CN01cpv0cZ1ZJjvVWrUuo_!!6000000003174-2-octopus.png"
+                    alt="">
+            </li>
+            <li>
+                <img src="https://img.alicdn.com/imgextra/i2/6000000003386/O1CN01ySmLuo1asptKSfbHC_!!6000000003386-0-octopus.jpg"
+                    alt="">
+            </li>
+            <li>
+                <img src="https://img.alicdn.com/imgextra/i3/6000000000084/O1CN012wKWpe1CUW5EEs61K_!!6000000000084-0-octopus.jpg"
+                    alt="">
+            </li>
+        </ul>
+        <div class="button">
+            <i class="iconfont icon-zuojiantou1"></i>
+            <i class="iconfont icon-zuojiantou1-copy"></i>
+
+            <ul class="dot">
+                <li class="active"></li>
+                <li></li>
+                <li></li>
+            </ul>
+        </div>
+    </div>
+</body>
+<script>
+
+    var timeId = null, index = 0
+
+    $(".icon-zuojiantou1").onclick = () => {
+        sport(1)
+    }
+    $(".icon-zuojiantou1-copy").onclick = () => {
+        sport(-1)
+    }
+
+    _(".dot li").forEach((v, i) => {
+        v.onclick = () => {
+            changeDotActive(i)
+        }
+    })
+
+    $(".swiper").onmouseover = () => {
+        clearInterval(timeId)
+    }
+
+    $(".swiper").onmouseout = () => {
+        auto()
+    }
+
+    function sport(offset) {
+        index += offset
+        if (index < 0) {
+            index = 0
+        }
+        if (index > 2 ) {
+            index = 2
+        }
+        if (index >= 0 && index <= 2) {
+
+            changeDotActive(index)
+        }
+
+    }
+    function changeDotActive(i) {
+        _(".dot li").forEach(val => {
+            val.classList.remove("active")
+        })
+        _(".dot li")[i].classList.add("active")
+        $(".photo").style.left = `${i * -630}px`
+    }
+
+    function auto() {
+        timeId = setInterval(() => {
+            $(".icon-zuojiantou1-copy").onclick()
+        }, 2000)
+    }
+
+    auto()
+
+
+
+    function $(className) {
+        return document.querySelector(className)
+    }
+
+    function _(className) {
+        return document.querySelectorAll(className)
+    }
+</script>
+
+</html>

历届学生/front-end-team-10/项目练习/学生项目/薛涛/2.28/轮播图v2.html

@@ -0,0 +1,134 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <link rel="stylesheet" href="http://at.alicdn.com/t/c/font_3888527_7tklo9l16jl.css">
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+            list-style: none;
+        }
+
+        .swiper {
+            width: 630px;
+            height: 315px;
+            margin: 100px auto;
+            overflow: hidden;
+            position: relative;
+        }
+
+        .swiper .swiper_wrap {
+            display: flex;
+            position: relative;
+            transition: all 1s;
+        }
+
+        .swiper .swiper_wrap li {}
+
+        .swiper .swiper_wrap li img {
+            width: 630px;
+            height: 315px;
+        }
+
+        .swiper .button {
+            width: 100%;
+            position: absolute;
+            top: 50%;
+            display: flex;
+            justify-content: space-between;
+            transform: translateY(-50%);
+        }
+
+        .swiper .button div {
+            color: #fff;
+            font-size: 20px;
+            background: #000;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            width: 50px;
+            height: 50px;
+            cursor: pointer;
+        }
+
+        .swiper .button .left {}
+
+        .swiper .button .right {}
+
+        .swiper .dot {
+            position: absolute;
+            left: 50%;
+            transform: translateX(-50%);
+            bottom: 20px;
+            display: flex;
+        }
+
+        .swiper .dot li {
+            width: 13px;
+            height: 13px;
+            background: #fff;
+            border-radius: 100%;
+            margin-right: 10px;
+            cursor: pointer;
+        }
+
+        .swiper .dot li:last-child {
+            margin-right: 0px;
+        }
+
+        .swiper .dot .active {
+            background: red;
+        }
+    </style>
+</head>
+
+<body>
+    <div class="swiper banner">
+        <ul class="swiper_wrap" style="left: 0px;">
+            <li>
+                <img src="https://img.alicdn.com/imgextra/i4/6000000003174/O1CN01cpv0cZ1ZJjvVWrUuo_!!6000000003174-2-octopus.png"
+                    alt="">
+            </li>
+            <li>
+                <img src="https://img.alicdn.com/imgextra/i2/6000000003386/O1CN01ySmLuo1asptKSfbHC_!!6000000003386-0-octopus.jpg"
+                    alt="">
+            </li>
+            <li>
+                <img src="https://img.alicdn.com/imgextra/i3/6000000000084/O1CN012wKWpe1CUW5EEs61K_!!6000000000084-0-octopus.jpg"
+                    alt="">
+            </li>
+        </ul>
+        <div class="button">
+            <div class="left">&#8249;</div>
+            <div class="right">&#8250;</div>
+        </div>
+        <ul class="dot"></ul>
+    </div>
+</body>
+<script src="./swiperV2.js"></script>
+<script> var a = new Swiper(".banner", {
+        autoPlay: false,
+        time: 2000,
+        initialSlide: 0,
+        // on: {
+ 
+        //     slideChange: function (index) {
+        //         console.log("当前轮播图切换到：",index);
+        //     },
+        //     slideChange3: function (index) {
+        //         console.log("当前轮播图切换到：",index);
+        //     }
+        // },
+    })
+
+    document.querySelector("button").onclick = () => {
+        a.slideTo(2)
+    }
+</script>
+
+</html>