运动讲解（2）

swiper插件（内置css和js）

概述：

swiper是一个开源的免费的一个滚动的组件（他可以运用于轮播图 焦点图 滑动效果等）

• 内置的Demo（演示）

• 他里面包含对应的css （以class的形式）

• 包含对应的js文件 js进行操作（面向对象形式进行封装）

swiper中文网

swiper的版本很多（从2.0 到 8.0常用的）

5.0 版本

html主体

<!-- class swiper-container 主体内容 -->
    <div class="swiper-container">
        <!-- 表示当前的轮播 -->
        <div class="swiper-wrapper">
            <!-- swiper-slide表示一个个的图 -->
            <div class="swiper-slide">Slide 1</div>
            <div class="swiper-slide">Slide 2</div>
            <div class="swiper-slide">Slide 3</div>
            <div class="swiper-slide">Slide 4</div>
            <div class="swiper-slide">Slide 5</div>
            <div class="swiper-slide">Slide 6</div>
            <div class="swiper-slide">Slide 7</div>
            <div class="swiper-slide">Slide 8</div>
            <div class="swiper-slide">Slide 9</div>
            <div class="swiper-slide">Slide 10</div>
        </div>
        <!-- 分页器 下面的点 -->
        <div class="swiper-pagination"></div>
        <!-- 左右切换的箭头 -->
        <div class="swiper-button-next"></div>
        <div class="swiper-button-prev"></div>
    </div>

js主体

//传入选择器 及相关配置
new Swiper('.swiper-container', {
    // autoplay:{
    //     delay: 3000,
    //     stopOnLastSlide: true, //移上对应的块 是否停止的动画
    //     disableOnInteraction: true,//禁用迭代
    // }
    autoplay: true, //开启自动播放 所有的全部使用默认值
    pagination: { //分页器
        el: '.swiper-pagination', //分页的点生成在哪
    },
    navigation: {//导航按钮
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
    },
})

move.js 文件

//获取样式的方法
function getStyle(ele, attr) {
    return window.getComputedStyle ? window.getComputedStyle(ele, null)[attr] : ele.currentStyle[attr]
}
//缓冲动画为true 
function move(ele, target, isBuffer = true,callback) {
    clearInterval(ele.timer) //清除之前的定时器影响
    //针对于px为单位的 width,height,left,top
    //opacity不需要px 
    //zIndex不需要动画
    //获取target对象里面的所有的key
    ele.timer = setInterval(() => {
        var flag = true
        for (let key in target) {
            //获取当前位置
            var current = parseFloat(getStyle(ele, key)) ? parseFloat(getStyle(ele, key)) : 0
            //定义步长和对应的目标位置
            if(key == 'opacity'){
                var step = target[key] - current > 0 ? 0.01 : -0.01
            }else{
                var step = target[key] - current > 0 ? 10 : -10
            }
            //定时器
            if (key == 'zIndex') { //层级
                ele.style[key] = target[key] //直接设置
            } else {
                if (isBuffer) { //如果是缓冲的
                    if (key == 'opacity') { //透明度
                        // 最小值 0.01
                        step = (target[key] - current) * 100 / 10 > 0 ? Math.ceil((target[key] - current) * 100 / 10) / 100 : Math.floor((target[key] - current) * 100 / 10) / 100
                    } else { //其他的
                        //控制步长的变化 离目标会越来越小 把步长和这个距离绑定
                        step = (target[key] - current) / 10 > 0 ? Math.ceil((target[key] - current) / 10) : Math.floor((target[key] - current) / 10)
                    }
                }
                //没有到达设置为false
                if (Math.abs(target[key] - current ) > Math.abs(step)) {
                    flag = false
                }
                //控制当前位置的变化
                current += step
                //给当前位置赋值
                if (key != 'opacity') {
                    ele.style[key] = current + 'px'
                } else {
                    ele.style[key] = current
                }
            }
        }
        if (flag) {
            console.log(123);
            clearInterval(ele.timer)
            //如果你的回调是一个函数就执行
            if(callback instanceof Function){
                callback()
            }
        }
    }, 20)
}

面向对象的轮播

class Rotation {
    constructor(element) {
        this.banner = element.querySelector('.banner')
        this.length = this.banner.children.length
        this.element = element
        this.prevBtn = element.querySelector('.prev')
        this.nextBtn = element.querySelector('.next')
        this.focusList = this.init()
        this.index = 0
        this.autoMove()
        //调用对应的事件监听
        this.handlerChange()
        this.handlerFocusClick()
        this.handlerMouseBox()
    }
    init() {
        let ol = document.createElement('ol')
        //根据对应的个数生成
        for (var i = 0; i < this.length; i++) {
            if (i == 0) {
                ol.innerHTML += `<li class="selected"></li>`
            } else {
                ol.innerHTML += `<li></li>`
            }
        }
        //添加进去
        this.element.appendChild(ol)
        //给ul的后面再添加第一个li
        //克隆第一个
        var clone = this.banner.children[0].cloneNode(true)
        this.banner.appendChild(clone)
        //返回所有添加的li
        return ol.children
    }
    changePosition(isRight = true) {
        if (isRight) {
            this.index++
            if (this.index == this.banner.children.length) {
                //强行设置对应的为第一个
                this.banner.style.left = '0px'
                //控制对应的下标为0
                this.index = 0
            }
        } else {
            this.index--
            //如果到第一个应该切到最后一个
            if (this.index == -1) {
                //强行设置对应的最后一个
                this.banner.style.left = this.length * -1 * this.element.clientWidth + 'px'
                this.index = this.length - 1
            }
        }
        this.setFocus(this.index)
        // move('.banner').set('left', -1*liWidth * index + 'px').end()
        // move('.banner').to(-liWidth * index, 0).end()
        move(this.banner, {
            left: -1 * (this.element.clientWidth) * this.index
        }, true)
    }
    autoMove() {
        this.timer = setInterval(() => {
            this.changePosition()
        }, 2000);
    }
    setFocus(i) {
        //超出范围等于0
        if (i > this.length - 1) {
            i = 0
        }
        //小于0 等于最大下标
        if (i < 0) {
            i = this.length - 1
        }
        //排他
        //先把所有的全部清除 再给自己设置
        // 获取所有的ol里面的li
        Array.from(this.focusList).forEach((li) => {
            li.className = ''
        })
        this.focusList[i].className = 'selected'
    }
    //焦点点击事件
    handlerFocusClick() {
        //事件委托机制
        this.focusList[0].parentElement.onclick =  (e) => {
            e = e || window.event
            clearInterval(this.timer)
            if (e.target.nodeName == 'LI') {
                var i = Array.from(this.focusList).findIndex((li) => {
                    return li == e.target
                })
                //移动到对应的位置
                move(this.banner, {
                    left: -this.element.clientWidth * i
                }, true)
                //将i赋值给index
                this.index = i
                //切焦点
                this.setFocus(i)
                // this.autoMove() 导致多一个定时器无法清除
            }
        }
    }
    //移动动盒子上面
    handlerMouseBox() {
        this.banner.parentElement.onmouseenter = () => {
            //控制俩个div显示
            this.nextBtn.style.display = 'block'
            this.prevBtn.style.display = 'block'
            //清除动画
            clearInterval(this.timer)
        }
        this.banner.parentElement.onmouseleave = () => {
            //控制俩个div隐藏
            this.nextBtn.style.display = 'none'
            this.prevBtn.style.display = 'none'
            //开始动画
            this.autoMove()
        }
    }
    //左右切换处理
    handlerChange() {
        //左边的事件
        this.prevBtn.onclick = () => {
            this.changePosition(false)
        }
        //右边的事件
        this.nextBtn.onclick =  () => {
            this.changePosition()
        }
    }
}
//调用
var box = document.querySelector('.box')
new Rotation(box)

放大镜

class Magnifier {
    constructor(smallBox, bigBox) {
        this.smallBox = smallBox
        this.bigBox = bigBox
        this.move = smallBox.querySelector('.move')
        this.bigImg = bigBox.children[0]
        this.init()
        this.handlerMouse()
    }
    init() {
        //计算对应的move这个盒子的宽高
        // 大的比大的等于小的比小的 bigImg/bigBox = box/move ==>  bigImg/box == bigBox/move
        this.move.style.width = this.smallBox.clientWidth / (this.bigImg.clientWidth / this.bigBox
                                                             .clientWidth) + 'px'
        this.move.style.height = this.smallBox.clientHeight / (this.bigImg.clientHeight / this.bigBox
                                                               .clientHeight) + 'px'
        //先需要隐藏
        this.move.style.display = 'none'
        this.bigBox.style.display = 'none'
    }
    handlerMouse() {
        //移入移出
        this.smallBox.onmouseenter = () => {
            this.move.style.display = 'block'
            this.bigBox.style.display = 'block'
        }
        this.smallBox.onmouseleave = () => {
            this.move.style.display = 'none'
            this.bigBox.style.display = 'none'
        }
        //移动
        this.smallBox.onmousemove = ({
            pageX,
            pageY
        }) => {
            //获取鼠标在smallbox里面位置
            let currentX = pageX - this.smallBox.offsetLeft
            let currentY = pageY - this.smallBox.offsetTop
            //中心点位置
            let centerPoint = {
                x: this.smallBox.clientWidth / 2,
                y: this.smallBox.clientHeight / 2
            }
            //移动的位置
            let targetPoint = {
                x: currentX - centerPoint.x,
                y: currentY - centerPoint.y
            }
            //边界判断
            if(targetPoint.x<0){
                targetPoint.x = 0
            }
            if(targetPoint.y<0){
                targetPoint.y = 0
            }
            //最大值判断
            let maxPoint = {
                x: this.smallBox.clientWidth - this.move.offsetWidth,
                y: this.smallBox.clientHeight - this.move.offsetHeight
            }
            if(targetPoint.x > maxPoint.x){
                targetPoint.x = maxPoint.x
            }
            if(targetPoint.y > maxPoint.y){
                targetPoint.y = maxPoint.y
            }
            //设置对应的位置
            this.move.style.left =  targetPoint.x + 'px'
            this.move.style.top =  targetPoint.y + 'px'
            //还要设置大盒子里面图片的位置
            this.bigImg.style.left = -targetPoint.x * this.bigImg.clientWidth / this.smallBox.clientWidth + 'px'
            this.bigImg.style.top = -targetPoint.y * this.bigImg.clientHeight / this.smallBox.clientHeight + 'px'
        }
    }
}
var small = document.querySelector('.box')
var big = document.querySelector('.bigbox')
new Magnifier(small, big)