封校后终于回家咯给即将中考的弟弟加油鼓劲，下午还和涛哥约会但是时间太短了。继续学习吧

许个愿，让我中奖让我中奖让我中奖

常见网页特效案例

案例：网页轮播图（必须掌握）

轮播图装的图片和外面盒子一样大小，就让外面盒子的ul改宽一些

能够保证小li 都一行显示 等轮播图做完后再隐藏后面的图片

下面文字较繁琐，浅看一下

轮播图也称为焦点图，是网页中比较常见的网页特效

功能需求：

鼠标经过轮播图，左右按钮显示，鼠标离开隐藏左右按钮

因为JS比较多，单独新建js文件夹，再新建js文件，引入页面中

此时需要添加 load 事件

显示隐藏display按钮

点击右侧按钮一次，图片往左播放一张，以此类推，左侧按钮同理

动态生成小圆圈

核心思路：小圆圈的个数要跟图片张数一致

所以首先先得到ul里面图片的张数（图片放入li 里面，所以就是li的个数）

得到几张图片 小圆圈就自动生成几个

利用循环动态生成小圆圈（这个圆圈要放入ol里面）

创建节点createElement('li')

插入节点ol.appendChild(li)

第一个小圆圈需要添加current类

小圆圈的排他思想

点击当前小圆圈，就添加current类

其余的小圆圈就移除这个current类

注意：在刚才生成小圆圈的同时，就可以直接绑定这个点击事件了

图片播放的同时，下面小圆圈跟随一起变化

点击小圆圈，可以播放相应图片

点击小圆圈滚动图片

此时用到animate动画函数（每次触发事件，元素都会向左移动page_width个像素）将js文件引（注意：因为index.html依赖animate.js所以 animate.js要写到index.js上面 先有动画才有代码执行，顺序一定不能颠倒

使用动画函数 (animate) 的前提，该元素必须有定位

注意：是ul移动 而不是小li

滚动图片的核心算法：点击某个小圆圈，就让图片滚动，小圆圈的索引号乘以图片的宽度作为ul移动距离

第一张图片[0]*100px = 0所以不会动 第二张图[1] * 100 = 100; 移动了100像素 第三张图[3] * 100 = 300.... 往左走是负值

还未知小圆圈的索引号

此时需要指定小圆圈的索引号，可以在生成小圆圈的时候，给他设置一个自定义属性，点击的时候获取这个自定义属性即可 (给他一个顺序）

点击右侧按钮一次，就让图片滚动一张

声明一个变量num 点击一次，自增1 让这个变量乘以图片宽度 就是ul的滚动距离

图片无缝滚动的原理

把ul第一个li复制一份，放到ul的最后面

当图片滚动到克隆的最后一张图片时，让ul快速的，不做动画的跳到最左侧：left为0

同时num赋值为0，可以重新开始滚动图片了

鼠标不经过轮播图，轮播图也会自动播放图片

鼠标经过，轮播图模块，自动播放停止

防止链接跳转(index.html)中写

无缝滚动原理

复制的第四张再点击按钮后 就快速跳转至第二张图（障眼法）

复制第四张图片后 有五个小li

但是小圆圈也多了一个

克隆第一张图

克隆ul 第一个li cloneNode() 加true 深克隆 复制里面的子节点 false浅克隆

添加到ul最后面appendChild

小圆圈不会多，代码写到了有几个图片就有几个小圆圈的后面

点击右侧按钮，小圆圈跟随变化

最简单的做法再声明一个变量circle 每次点击自增1，注意，左侧按钮也需要这个变量，因此要声明全局变量

但是图片有5张，小圆圈只有4个少一个，必须加一个判断条件

如果circle == 4 就重新复原为0

修改小bug

小圆圈对应相应的图片

自动播放功能

添加一个定时器

自动播放轮播图，实际就类似于点击了右侧按钮

此时使用手动调用右侧按钮点击事件 arrow_r.click()

鼠标经过focus就停止定时器

鼠标离开focus就开启定时器

节流阀

放置轮播图按钮连续点击造成播放过快

节流阀目的：当上一个函数动画内容执行完毕，再去执行下一个函数动画，让事件无法连续触发

核心实现思路：利用回调函数，添加一个变量来控制，锁住函数和解锁函数

开始设置一个变量 var flag = true;

if(flag) {flag = false; do something}先关闭水龙头

利用回调函数动画执行完毕 flag = true 打开水龙头

在animate.js中

要求两侧都为true才能执行 否侧不会调用函数

案例：返回顶部

滚动窗口至文档中的特定位置

window.scroll(x,y)

注意：里面的x和y不跟单位，直接写数字

带有动画的返回顶部

此时可以继续使用封装的动画函数

只需要把所有的left相关的值改为 跟 页面垂直滚动距离相关就可以了

页面滚动了多少，可以通过window.pageYOffset 得到

最后是页面滚动，使用window.scroll(x,y)

案例：筋头云

鼠标经过某个li 筋斗云跟这到当前li的位置

鼠标离开这个li 筋斗云复原为原来的位置

鼠标点击某个li 筋斗云就会留在这个li 位置

分析：

利用动画函数做动画效果

原先筋斗云的起始位置是0

鼠标经过某个li 把当前的li offsetLeft 位置作为目标值即可

鼠标离开某个li 就把目标设为0

如果点击了li 就把li 当前的位置存储起来，作为筋斗云的起始位置

script写在html结构的上面就要添加load事件，等元素全部加载完毕后

点击后某个li 后当前的位置 就是起始的位置