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

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

常见网页特效案例

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

轮播图装的图片和外面盒子一样大小，就让外面盒子的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 后当前的位置就是起始的位置

JS学习之BOM | 常见网页特效 | 轮播图 | 返回顶部 | 筋斗云案例相关推荐

第九天 PC端网页特效(轮播图制作)
目录 1.元素偏移量 offset 1.1 offset 概述 1.2 offset 和 style 的区别 1.3案例 1.获取鼠标在盒子内的坐标 2.模仿京东图片放大镜的效果 2.元素可视区 cl ...
手机端网页制作轮播图html怎么写,原生JS实现移动端web轮播图详解（结合Tween算法造轮子）...
前言相信大家应该都知道,移动端的轮播图是我们比较常见的需求, 我们最快的实现方式往往是使用第三方的代码, 例如 swiper , 但当遇到一些比较复杂的轮播图需求时, 往往是束手无策,不知道怎么改 ...
用JavaScript实现网页无限轮播图效果，附整套源码
用JavaScript实现无限轮播图效果(附源码) javascript群内每日课题-今日课题:用JavaScript实现无限轮播图效果 PS:很多企业通用的案例自己再学习过程中肯定是要熟练的,所以今 ...
js + css 做出网易云音乐的轮播图
先说一下思路,网易云轮播图是这样的,每隔一段时间(这里运用到了js的定时器)右边的图片会放大(css的transform)并切换(定位的z-index)上来(这里还运用了过渡transition),最 ...
html原生轮播图的实现,使用原生js实现点击切换图片（轮播图）效果
要实现的功能大致为: 点击两边的切换按钮,可以按顺序切换不同的图片具体操作如下: 一.布局html 1.添加一个div容器 2.添加一个轮播图img标签 3.添加两个按钮img标签二.css样式设 ...
使用hammer.js实现移动端手指滑动切换轮播图教程
今天面试前端开发时,要求在移动端实现手指滑动切换轮播图这里我用到 bootsrap 的轮播图组件 + hammer.js 库文章参考: Hammer.js - 李林峰的园子 - 博客园 (cnbl ...
用JS实现图片切换、定时器、轮播图
一. 图片切换实现功能: 当点击"下一页"时,跳转到下一张图片: 当点击"上一页"时,跳转到上一张照片: 显示当前页数/总页数,如:2/6. <!DOC ...
HTML+JavaScript网页背景轮播图完整源码
轮播图运行效果轮播图实现完整源码 <!DOCTYPE html> <html lang="en">
JQ动画和特效轮播图
引用块内容 animate.css jquery-1.8.3.min.js JS中的代码 var pigs=['images/1.jpg','images/2.jpg','images/3.jpg'] ...

JS学习之BOM | 常见网页特效 | 轮播图 | 返回顶部 | 筋斗云案例