文章目录

• • 运动函数
  • • 一、运动函数封装
    • • 1. 基础单属性运动函数封装
      • 2. 多属性运动函数封装
    • 二、左右切换轮播图
    • 三、Swiper

运动函数

一、运动函数封装

运动函数4步骤：

1. 获取当前属性，使用parseInt去除单位
2. 速度(speed)
3. 下一个位置(next)
4. 定位(拼接px)

1. 基础单属性运动函数封装

使用定时器前，需要先清除一下定时器，避免用户频繁点击导致生成过多定时器的bug；

传入属性是opacity时，需要特殊处理，将其*100进行运算，避免小数取整的情况造成bug。

传入的值：
dom 目标元素，attr 目标元素的属性名，target 目标元素该属性的目标值，fn 运动到达目标之后需要执行的函数（可以为空）

// 如果运动的属性是opacity,target要乘以100传入
function move(dom,attr,target,fn){clearInterval(dom.timer);dom.timer = setInterval(()=>{// 1. 获取当前位置，清除单位let current;if(attr=='opacity'){current = parseInt(window.getComputedStyle(dom)[attr]*100);}else{current = parseInt(window.getComputedStyle(dom)[attr])}// 2. 速度let speed = (target - current)/10;// 正数向上取整，负数向下取整speed = speed>0?Math.ceil(speed):Math.floor(speed);// 3. 下一个位置let next = current + speed;// 4. 定位if(attr == 'opacity'){dom.style.opacity = next / 100;}else{dom.style[attr] = next+'px';}// 判断是否达到目标if(target==next){clearInterval(dom.timer);if(fn){fn();}}})
}

函数调用举例：

topBtn.onclick = function(){move(div,'top',200);
}
hideBtn.onclick = function(){move(div,'opacity',0*100,function(){// 透明度为0后，将元素隐藏div.style.display='none';})
}

2. 多属性运动函数封装

要点：

1. 使用对象target，用键值对的形式记录所有需要变化的属性；

2. for in方法，遍历对象，再通过运动函数4步骤进行处理；

3. 使用变量flag，每次运动结束判断是否达到目标值，没有就置为false，最后判断flag的值即可判断是否全部属性都达到了目标值。

// 目标元素获取
const div = document.querySelector('div');
// 目标值
const target = {width:200,height:200,left:500,opacity:50
};

// 函数调用
animate(div,target,function(){div.style.display = 'none';
})

// 每隔30ms，所有属性都变动一点
function animate(dom,target,fn){dom.timer = setInterval(()=>{// 记录本次能否到达let flag = true;for(let attr in target){// 1. 当前值let current;if(attr=='opacity'){current = parseInt(window.getComputedStyle(dom)[sttr]*100)}else{current = parseInt(window.getComputedStyle(dom)[attr])}// 2. 获取速度let speed = (target[attr] - current)/10;speed = speed>0?Math.ceil(speed):Math.floor(speed);// 3. 下一个值let next = current + speed;// 4. 定位if(attr=='opacity'){dom.style[attr] = next/100;}else{dom.style[attr] = next + 'px';}if(next != target[attr]){flag = false;}}// 判断是否都到达了目标值if(flag){clearInterval(dom.timer);if(fn){fn();}}},30)
}

二、左右切换轮播图

思路：(单张图片的width=500px)

通过设置ul的left，来展示li的图片内容。ul[left=-500px]时，显示第二张图，图片index=1。

需要用到一.1.中的move函数（基础单属性运动函数封装）

const leftBtn = document.querySelector('.left');
const rightBtn = document.querySelector('.right');
const ul = document.querySelector('ul');
const liS = ul.children;
let index = 0;
leftBtn.onclick = function(){// 第一张图片，无法左移if(index==0)return;index--;move(ul,'left',-index*500);
}
rightBtn.onclick = function(){// 最后一张，无法右移if(index==liS.length-1)return;index++;move(ul,'left',-index*500);
}

三、Swiper

Swiper官网：https://www.swiper.com.cn/

创建一个基础的Swiper：

1. 引入css和js

2. 书写轮播图的结构

   Swiper7的默认容器是’.swiper’，Swiper6之前是’.swiper-container’

3. 如有样式需要改变，不要改固定需要的样式，可以自己添加类型写样式

   .box{width: 500px;height: 200px;margin:100px auto;border:1px solid #ccc;
   }
   .box-next{color:red;
   }
   .box-prev{color:purple;
   }
   

4. 初始化轮播图

   new Swiper('.box' ,{navigation: {nextEl: '.box-next',prevEl: '.box-prev',},pagination: {el: '.swiper-pagination',dynamicBullets: true,},
   })