PC端常见网页特效

5.常见网页特效案例

案例：网页轮播图

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

注意：

1. 为了保证所有的li能在一行显示，必须保证ul足够大

 

注意：因为页面中相同元素较多，所以获取元素的时候尽量要准确

 

 注意：

1. 因为index.js里面需要用到animate.js，所以animate.js要在index.js上面引入，确保先有animate.js再有index.js 
2. 必须给ul设置定位，因为真正移动的是ul
3. 
4. ul的移动距离是负值

 

 注意：

1. 
2. 但是这样做会有一个问题，就是底部的小圆圈会多一个，后续继续改进

 

 注意：

1. 因为我们克隆第一张图片的代码写在了生成小圆圈的下面，所以不会多生成一个小圆圈
2. 克隆的代码写在点击按钮之前

 

 注意：

1. 因为我们li（图片）的个数比小圆圈要多一个，所以图片显示到最后一张的时候（表面看起来是回到第一张播放），小圆圈会不够，于是就不显示，所以当circle的值等于小圆圈的个数的时候，就让circle的值重新等于0
2. 因为circle变量在左侧按钮也需要使用，所以声明成全局变量

几个bug的改进

1. 如果同时使用小圆圈和右侧按钮进行图片的滚动，一般会出现图片顺序上的错误，因为 小圆圈是通过每一个li的下标来控制图片的，而按钮是通过变量num来控制图片的，二者没有统一起来 解决方法：让num=index
2. 底部的小圆圈同理，当前小圆圈的下标circle没有和li的索引号对应。解决方法：让circle=index
3. 因为num和circle都是全局变量，在任何地方都可以使用，可以直接修改到它们使用处的值

左侧按钮 和右侧按钮基本同理

 

window.addEventListener('load', function ()