标签：smallBox style target 17 move key 运动 banner day

运动讲解（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)

 

标签：smallBox,style,target,17,move,key,运动,banner,day
来源： https://www.cnblogs.com/jxooooolxe/p/16629993.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。