JavaScript特效！动画原理以及轮播图的实现

素颜马尾好姑娘i 2021-12-11 08:47 310阅读 0赞

本文笔记基于「千古壹号」的GitHub项目：https://github.com/qianguyihao/web

### 文章目录 ###

*  1.offsetWidth和offsetHigh
 *  2. offsetTop和offsetLeft
 *  3.offsetParent
 *  4.动画
 *   *  4.1 简单动画
     *  4.2 匀速动画
 *  5.轮播图
 *   *  5.1 需求1：鼠标放在索引上跳转到对应图
     *  5.2 需求2：自动播放
     *  5.3 需求3：放置鼠标呈现箭头，离开消失
     *  5.4 需求4：左右切换图片

# 1.offsetWidth和offsetHigh #

*  **作用：获取元素节点的宽和高**
 *  打印结果为纯数字，offsetWidth=**width**\+padding×2+border×2；offsetHeight=**height**\+padding×2+border×2；
 *  背景颜色的设置：内容+填充物（内边框）；
 *  表格边框颜色默认为黑色。

# 2. offsetTop和offsetLeft #

*  offsetLeft：距离父亲的padding-left的距离；
 *  offsetLeft优先级=行内样式style.left>父相子绝>系统默认；
 *  offsetLeft**不可赋值**，只可以出现在等式右边，style.left可以赋值，一般在等式左边；因此，**一般用offsetLeft 和 offsetTop 获取值，用style.left 和 style.top 赋值**

# 3.offsetParent #

*  作用：检测**祖先盒子有无定位**，若有**返回最近的那个盒子**，否则返回body

# 4.动画 #

## 4.1 简单动画 ##

*  原理：**盒子未来位置=当前位置+步长**
 *  思路：设置1个按钮和盒子，设置点击事件，事件内设置一个定时器，改变左侧位置，代码如下：

div.style.left = div.offsetLeft + 100 + "px";

*  parseInt(div.style.left):**默认取整数部分**，**作用2**：**转化为10进制**，parseInt(string, radix) string为字符串，radix为介于2-36之间的数。使用者告诉这个函数string（比如11）是radix（比如2）进制的。

## 4.2 匀速动画 ##

*  原理与4.1节相同
 *  思路：涉及一个封装的函数，输入盒子与目标距离，返回匀速动画效果。其中需要用到定时器设置
 *  代码如下

# 5.轮播图 #

*  **需求**：鼠标放在索引上跳转到对应图，自动播放，放置鼠标呈现箭头而离开消失，切换左右图。
 *  **思路**：  
    1.**鼠标放在索引上跳转到对应图**：原理是tab栏切换，需要用到**onmouseover**标签；  
    2.**自动播放**：原理为动画，需要设置父盒子刚好能放下一张图，内容则是5张图，横向排列**设置定时器向左匀速运动**；  
    3.**放置鼠标呈现箭头而离开消失**：需要用到**onmouseover等标签**；  
    4.**切换左右图**：点击左箭头涉及到**动画设置、索引排他思想**（因为每幅图对应着各自索引，改变图的话高亮索引也要改变）；点击右箭头与自动播放效果相同。  
    此外，**需要设置最后一张图的下一张为第一张，第1张图的前一张为最后一张。**
 *  **结果截图**：（所用图片来自网络，侵删）  
    ![轮播图][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0MjQzNjk0_size_16_color_FFFFFF_t_70]

## 5.1 需求1：鼠标放在索引上跳转到对应图 ##

*  排他思想
 *  鼠标放在小方块上的索引值square和图片索引key同步，并同时设置动画效果

key = square = this.index;
    animate(ul, -this.index * imgWidth);

## 5.2 需求2：自动播放 ##

*  核心是添加定时器，初始化key=0，square=0，定时器中的函数原理为动画效果，但需要保证square和图片索引key同步。函数的代码如下：

## 5.3 需求3：放置鼠标呈现箭头，离开消失 ##

*  需要清除定时器效果，移开后恢复，因此会用到onmouseover事件和onmouseout事件

onmouseover事件：

div.style.display = "block";
     clearInterval(timer);

onmouseout事件：

div.style.display = "none";
     timer = setInterval(autoPlay, 1000);

## 5.4 需求4：左右切换图片 ##

*  左右切换图片，会用到点击事件。  
    左箭头的代码如下：

//图片
    key--;
    if (key < 0) { //若滑到第1张前面，则图片索引为最后一张
                  	ul.style.left = -imgWidth * (olLiArr.length) + "px";
                     key = olLiArr.length - 1;
                 }
                 animate(ul, -key * imgWidth);
    //索引
     square--;
     if (square < 0) { //索引值如果等于5，立刻变为0；
                        square = olLiArr.length - 1;
                    }
                    for (var i = 0; i < olLiArr.length; i++) { //排他思想
                        olLiArr[i].className = "";
                    }
                    olLiArr[square].className = "current";

右箭头点击事件为自动播放函数。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0MjQzNjk0_size_16_color_FFFFFF_t_70]: /images/20211211/f56981a2022d41dd924f90ae4a29820b.png