15-js运动函数和轮播图

运动函数

一、运动函数封装

运动函数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();
            }
        }
    })
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

函数调用举例：

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

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
};
1
2
3
4
5
6
7
8
9

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

// 每隔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)
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

二、左右切换轮播图

思路：(单张图片的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);
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

三、Swiper

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

创建一个基础的Swiper：

1. 引入css和js

   <link rel="stylesheet" href="./swiper.min.css">
   <script src="./swiper.min.js">script>
   1
   2

2. 书写轮播图的结构

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

   <div class="swiper-container box">
       <div class="swiper-wrapper">
         <div class="swiper-slide">
           <img src="./images/1.jpg" alt="">
         div>
         <div class="swiper-slide">
           <img src="./images/2.jpg" alt="">
         div>
         <div class="swiper-slide">
           <img src="./images/3.jpg" alt="">
       div>
       
       <div class="swiper-button-next box-next">div>
       <div class="swiper-button-prev box-prev">div>
       
       <div class="swiper-pagination box-point">div>
     div>
   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
   11
   12
   13
   14
   15
   16
   17

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

   .box{
       width: 500px;
       height: 200px;
       margin:100px auto;
       border:1px solid #ccc;
   }
   .box-next{
       color:red;
   }
   .box-prev{
       color:purple;
   }
   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
   11
   12

4. 初始化轮播图

   new Swiper('.box' ,{
       navigation: {
           nextEl: '.box-next',
           prevEl: '.box-prev',
       },
       pagination: {
           el: '.swiper-pagination',
           dynamicBullets: true,
       },
   })
   1
   2
   3
   4
   5
   6
   7
   8
   9
   10