终于要学习轮播图了...激动
网页轮播图
轮播图也称为焦点图,是网页中比较常见的网页特效
先来看看需求:
老师是在之前的品优购的案例中补充的,但是我就重新做一个简单的网页吧,方便看一些:
结构:
我们的轮播图会有一排小圆圈在下面,但是小圆圈的个数总是不确定的,所以我们需要动态生成小圆圈,有几张图片就生成几个小圆圈.
首先要获取元素:
注意:一定是focus下的ul,以防混淆.
本文由“壹伴编辑器”提供技术支持
创建元素,添加元素
那么现在不管有多少图片他都能动态的生成
本文由“壹伴编辑器”提供技术支持
先把最简单的做了,当鼠标移动到焦点图上时,左右箭头显示,移开时隐藏
本文由“壹伴编辑器”提供技术支持
现在我们要使点击的li更换底色,点哪一个就让哪一个li变色,其余的不变,这就要用到我们之前学习的排他思想了
直接将代码写到我们刚刚的循环里:
本文由“壹伴编辑器”提供技术支持
接下来我们要做的是点击小圆圈,就能跳转到相应的图片上去:
小圆圈的索引号一直困扰着我,老师提供的方法真的很妙,太聪明了!
来看看是怎么做的吧:
看看现在的效果吧!
本文由“壹伴编辑器”提供技术支持
这个地方真的很厉害了,现在分析一下:
其实我们在做的时候,不需要自己手动将最后一张图片复制粘贴,直接让JS帮我们动态生成就好了,顺便复习之前的知识
如果我们自己手动复制粘贴的话,就会多出一个小圆圈,但是使用克隆的话,是在小圆圈生成之后,所以不会多出一个小圆圈
解决一些小的bug:
比如我们用小圆圈点到第三张图的时候,再切换成箭头切换,就会出现
这是因为我们的ol点击事件和箭头点击事件之间没有联系,我们用箭头播放下一张是用num控制的,和前面的li点击没有联系
我已经快写不下去了...
脑袋一片浆糊
我们在点击左右箭头时,就将index赋值给num和circle,这样才能实现同步.
最后再将向左的也写一下:
现在做最后一个模块,让轮播图在没有点击的情况下自动播放,做完就去玩手机!!!
第三条让我欣喜如狂~
想到自动播放,那就先设置一个定时器:
就是这么简单!!
当鼠标在focus上时清除定时器,移开时继续:
清除时让timer = null最合适.
看看效果,因为GIF不能太大,所以我就加快速度
最后的效果:
over!明天复习一遍!!!先去洗澡
