Web APIs：PC 端网页特效--常见网页特效案例--轮播图及节流阀思想

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

功能需求：

1. 鼠标经过轮播图模块，左右按钮显示，离开隐藏左右按钮。

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

3. 图片播放的同时，下面小圆圈模块跟随一起变化。

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

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

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

网页轮播图-结构搭建

基本的结构，一个ul里面包含一群小li,但是是横的

网页轮播图-鼠标经过显示隐藏左右按钮

① 因为js较多，我们单独新建js文件夹，再新建js文件，引入页面中。

② 此时需要添加 load 事件。

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

④ 显示隐藏 display 按

window.addEventListener('load',function(){var arrow_l=document.querySelector('.arrow-l')var arrow_r=document.querySelector('.arrow-r')var focus=document.querySelector('.focus')// 鼠标经过 显示左右按钮focus.addEventListener('mouseenter',function(){arrow_l.style.display='block';arrow_r.style.display='block';})focus.addEventListener('mouseleave',function(){arrow_l.style.display='none';arrow_r.style.display='none';})
})

网页轮播图-动态生成小圆圈

① 动态生成小圆圈

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

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

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

⑤ 创建节点 createElement(‘li’)

⑥ 插入节点 ol. appendChild(li)

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

ol.children[0].className='current';

// 动态生成小圆圈var ul=focus.querySelector('ul');var ol=focus.querySelector('ol');for(var i=0;i<ul.children.length;i++){// 创建一个小livar li=document.createElement('li')// 把小li插入到ol里面ol.appendChild(li);}// 第一个小圆圈需要添加 current类ol.children[0].className='current';

网页轮播图-小圆圈排他思想

① 小圆圈的排他思想

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

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

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

li.addEventListener('click',function(){for (var i = 0; i < ol.children.length; i++) {ol.children[i].className='';}this.className='current';})
要写在for循环里面

网页轮播图-点击小圆圈滚动图片

① 点击小圆圈滚动图片

② 此时用到animate动画函数，将js文件引入（注意，因为index.js 依赖 animate.js 所以，animate.js 要写到 index.js 上面）

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

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

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

⑥ 此时需要知道小圆圈的索引号，我们可以在生成小圆圈的时候，给它设置一个自定义属性，点击的时候获取这个自定义属性即可。

就是通过自定义属性li.setAttribute('index',i);设置的值为i,

然后获取当前的index属性值，通过图片滚动小圆圈的索引号乘以图片的宽度当做移动距离计算

网页轮播图-右侧按钮无缝滚动

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

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

③ 图片无缝滚动原理

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

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

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

这样写但又bug

当我走到最后一张，在点其实到第二张了，所有把第一张写在最后面。

网页轮播图-克隆第一张图片

① 克隆第一张图片

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

③ 添加到 ul 最后面 appendChild

这样写导致我们又多出了一个圆圈，因此让js自动生成

这样小圆圈还是只有4个，这个是因为克隆写在小圆圈之后。

网页轮播图-小圆圈跟随右侧按钮一起变化

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

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

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

④ 如果circle == 4 就从新复原为 0

网页轮播图-俩个小bug解决方案

我们播放下一张是num控制的，跟点击小圆圈没有关系，因此存在差异

网页轮播图-左侧按钮功能制作

window.addEventListener('load',function(){var arrow_l=document.querySelector('.arrow-l')var arrow_r=document.querySelector('.arrow-r')var focus=document.querySelector('.focus')var focusWidth=focus.offsetWidth;// 鼠标经过 显示左右按钮focus.addEventListener('mouseenter',function(){arrow_l.style.display='block';arrow_r.style.display='block';})focus.addEventListener('mouseleave',function(){arrow_l.style.display='none';arrow_r.style.display='none';})// 动态生成小圆圈var ul=focus.querySelector('ul');var ol=focus.querySelector('ol');for(var i=0;i<ul.children.length;i++){// 创建一个小livar li=document.createElement('li');// 记录当前小圆圈的索引号 通过自定义属性来做li.setAttribute ('index',i);// 把小li插入到ol里面ol.appendChild(li);// 小圆圈的排他思想 我们可以直接在生成小圆圈的同时直接绑定点击事件li.addEventListener('click',function(){for (var i = 0; i < ol.children.length; i++) {ol.children[i].className='';}this.className='current';// 点击小圆圈，移动图片 ul// ul的移动距离，小圆圈的索引号乘以图片的宽度 注意是负值// 当我点了某个小li就拿到当前小li的索引号var index=this.getAttribute('index');// 当我们点击小li就要把这个li的索引号给numnum=index;// 当我们点击小li就要把这个li的索引号给ciclecircle=index;animate(ul,-index*focusWidth)})}// 第一个小圆圈需要添加 current类ol.children[0].className='current';// 克隆第一张图片(li)放到ul中最后面var first=ul.children[0].cloneNode(true);ul.appendChild(first);   // 点击右侧按钮，图片滚动一张var num =0;// 这个是控制小圆圈的播放var circle=0;arrow_r.addEventListener('click',function(){// 如果走到了最后一张复制图片，此时快速把ul的left改为0if(num==ul.children.length-1){ul.style.left=0;num=0;}num++;animate(ul,-num*focusWidth)circle++;// 如果circle==4说明走到最后我们克隆的这张图片了 我们就复原if(circle==ol.children.length){circle=0;}// 先清除其余小圆圈的current类名circleChange();})// 左侧按钮做法arrow_l.addEventListener('click',function(){// 如果走到了最后一张复制图片，此时快速把ul的left改为0if(num==0){num=ul.children.length-1;ul.style.left=-num *focusWidth+'px';// 就是第一张到最后一张}num--;animate(ul,-num*focusWidth)circle--;// 如果circle<0说明第一张图片，则小圆圈要改为第4个小圆圈（3）// if(circle<0){//     circle=ol.children.length-1;// }circle=circle<0 ? ol.children.length-1 : circle;// 太重复，写成函数circleChange();})function circleChange(){// 先清除其余小圆圈的current类名for (var i = 0; i < ol.children.length; i++) {ol.children[i].className='';}// 留下当前的小圆圈的current的类型ol.children[circle].className='current'}
})

网页轮播图-自动播放功能

① 自动播放功能

② 添加一个定时器

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

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

⑤ 鼠标经过focus 就停止定时器

⑥ 鼠标离开focus 就开启定时器

节流阀

防止轮播图按钮连续点击造成播放过快。

节流阀目的：

当上一个函数动画内容执行完毕，再去执行下一个函数动画，让事件无法连续触发。

核心实现思路：

利用回调函数，添加一个变量来控制，锁住函数和解锁函数。

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

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

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

完整代码

window.addEventListener('load',function(){var arrow_l=document.querySelector('.arrow-l')var arrow_r=document.querySelector('.arrow-r')var focus=document.querySelector('.focus')var focusWidth=focus.offsetWidth;// 鼠标经过 显示左右按钮focus.addEventListener('mouseenter',function(){arrow_l.style.display='block';arrow_r.style.display='block';clearInterval(timer);timer=null;//清空定时器变量})focus.addEventListener('mouseleave',function(){arrow_l.style.display='none';arrow_r.style.display='none';timer=setInterval(function(){// 手动调用点击事件arrow_r.click();},2000)})// 动态生成小圆圈var ul=focus.querySelector('ul');var ol=focus.querySelector('ol');for(var i=0;i<ul.children.length;i++){// 创建一个小livar li=document.createElement('li');// 记录当前小圆圈的索引号 通过自定义属性来做li.setAttribute ('index',i);// 把小li插入到ol里面ol.appendChild(li);// 小圆圈的排他思想 我们可以直接在生成小圆圈的同时直接绑定点击事件li.addEventListener('click',function(){for (var i = 0; i < ol.children.length; i++) {ol.children[i].className='';}this.className='current';// 点击小圆圈，移动图片 ul// ul的移动距离，小圆圈的索引号乘以图片的宽度 注意是负值// 当我点了某个小li就拿到当前小li的索引号var index=this.getAttribute('index');// 当我们点击小li就要把这个li的索引号给numnum=index;// 当我们点击小li就要把这个li的索引号给ciclecircle=index;animate(ul,-index*focusWidth)})}// 第一个小圆圈需要添加 current类ol.children[0].className='current';// 克隆第一张图片(li)放到ul中最后面var first=ul.children[0].cloneNode(true);ul.appendChild(first);   // 点击右侧按钮，图片滚动一张var num =0;// 这个是控制小圆圈的播放var circle=0;// falg就是节流阀var falg=true;arrow_r.addEventListener('click',function(){if(falg){falg=false;//关闭节流阀// 如果走到了最后一张复制图片，此时快速把ul的left改为0if(num==ul.children.length-1){ul.style.left=0;num=0;}num++;animate(ul,-num*focusWidth,function(){falg=true;//打开节流阀})circle++;// 如果circle==4说明走到最后我们克隆的这张图片了 我们就复原if(circle==ol.children.length){circle=0;}// 先清除其余小圆圈的current类名circleChange();}})// 左侧按钮做法arrow_l.addEventListener('click',function(){if(falg){falg=false;// 如果走到了最后一张复制图片，此时快速把ul的left改为0if(num==0){num=ul.children.length-1;ul.style.left=-num *focusWidth+'px';// 就是第一张到最后一张}num--;animate(ul,-num*focusWidth,function(){falg=true;})circle--;// 如果circle<0说明第一张图片，则小圆圈要改为第4个小圆圈（3）// if(circle<0){//   circle=ol.children.length-1;// }circle=circle<0 ? ol.children.length-1 : circle;// 太重复，写成函数circleChange();}})function circleChange(){// 先清除其余小圆圈的current类名for (var i = 0; i < ol.children.length; i++) {ol.children[i].className='';}// 留下当前的小圆圈的current的类型ol.children[circle].className='current'}// 自动播放轮播图var timer=setInterval(function(){// 手动调用点击事件arrow_r.click();},2000)
})

Web APIs：PC 端网页特效--常见网页特效案例--轮播图及节流阀思想相关推荐

Javascript-API-BOM、动画函数、网页轮播图、节流阀、筋斗云、固定侧边栏返回顶部案例
动画实现原理核心原理:通过定时器 setInterval() 不断移动盒子位置. 实现步骤: 获得盒子当前位置让盒子在当前位置加上1个移动距离利用定时器不断重复这个操作加一个结束定时器的条件 ...
WebAPI第四天学习总结—— 常见网页特效案例（轮播图、节流阀、返回顶部、筋斗云案例）
常见网页特效案例案例:网页轮播图轮播图也称为焦点图,是网页中比较常见的网页特效. 效果: 功能需求: 1.鼠标经过轮播图模块,左右按钮显示,离开隐藏左右按钮. 2.点击右侧按钮一次,图片往 ...
JS学习之BOM | 常见网页特效 | 轮播图 | 返回顶部 | 筋斗云案例
封校后终于回家咯给即将中考的弟弟加油鼓劲,下午还和涛哥约会但是时间太短了.继续学习吧许个愿,让我中奖让我中奖让我中奖常见网页特效案例案例:网页轮播图(必须掌握) 轮播图装的图片和外面盒子一样大小 ...
Web APIs介绍（四）——offset/client/scroll/轮播图/本地存储
1.1. 元素偏移量 offset 系列 1.1.1 offset 概述 offset 翻译过来就是偏移量, 我们使用 offset系列相关属性可以动态的得到该元素的位置(偏移).大小等. 获得元素距 ...
PC端网页特效 | 常见网页特效案例
目录案例:网页轮播图轮播图JS全部代码节流阀案例:返回顶部 JS代码为案例:筋头云案例案例:网页轮播图轮播图也称为焦点图,是网页中比较常见的网页特效. 功能需求: 鼠标经过轮播图模块,左 ...
Web APIs：移动端网页特效--移动端常用开发框架（Bootstrap）及阿里百秀轮播图案例
框架概述框架,顾名思义就是一套架构,它会基于自身的特点向用户提供一套较为完整的解决方案.框架的控制权在框架本身,使用者要按照框架所规定的某种规范进行开发. 前端常用的框架有 Bootstrap.V ...
【重点案例】b站pink老师JavaScript的PC端网页特效案例代码——网页轮播图
目录代码段: 1.index.js部分(全是重点) 2.animate.js部分(重点,是之前封装好的动画函数) 3.index.html部分(重点在标红区) 4.index.css部分(重点在标红 ...
js 移动端网页特效+移动端轮播图案例+移动端常用开发插件的使用
触屏事件常见触屏事件: 触屏touch事件说明 touchstart 手指触摸到DOM元素时触发 touchmove 手指在DOM元素上滑动时触发 touchend 手指从一个DOM元素上移开时触 ...
手机端网页制作轮播图html怎么写,原生JS实现移动端web轮播图详解（结合Tween算法造轮子）...
前言相信大家应该都知道,移动端的轮播图是我们比较常见的需求, 我们最快的实现方式往往是使用第三方的代码, 例如 swiper , 但当遇到一些比较复杂的轮播图需求时, 往往是束手无策,不知道怎么改 ...

Web APIs：PC 端网页特效--常见网页特效案例--轮播图及节流阀思想

Web APIs：PC 端网页特效--常见网页特效案例--轮播图及节流阀思想相关推荐

最新文章

热门文章