JavaScript笔记(23)轮播图

终于要学习轮播图了...激动

网页轮播图

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

先来看看需求:

老师是在之前的品优购的案例中补充的,但是我就重新做一个简单的网页吧,方便看一些:

结构:

我们的轮播图会有一排小圆圈在下面,但是小圆圈的个数总是不确定的,所以我们需要动态生成小圆圈,有几张图片就生成几个小圆圈.

首先要获取元素:

注意:一定是focus下的ul,以防混淆.

本文由“壹伴编辑器”提供技术支持

创建元素,添加元素

那么现在不管有多少图片他都能动态的生成

本文由“壹伴编辑器”提供技术支持

先把最简单的做了,当鼠标移动到焦点图上时,左右箭头显示,移开时隐藏

本文由“壹伴编辑器”提供技术支持

现在我们要使点击的li更换底色,点哪一个就让哪一个li变色,其余的不变,这就要用到我们之前学习的排他思想了

直接将代码写到我们刚刚的循环里:

本文由“壹伴编辑器”提供技术支持

接下来我们要做的是点击小圆圈,就能跳转到相应的图片上去:

小圆圈的索引号一直困扰着我,老师提供的方法真的很妙,太聪明了!

来看看是怎么做的吧:

看看现在的效果吧!

本文由“壹伴编辑器”提供技术支持

这个地方真的很厉害了,现在分析一下:

其实我们在做的时候,不需要自己手动将最后一张图片复制粘贴,直接让JS帮我们动态生成就好了,顺便复习之前的知识

如果我们自己手动复制粘贴的话,就会多出一个小圆圈,但是使用克隆的话,是在小圆圈生成之后,所以不会多出一个小圆圈

解决一些小的bug:

比如我们用小圆圈点到第三张图的时候,再切换成箭头切换,就会出现

这是因为我们的ol点击事件和箭头点击事件之间没有联系,我们用箭头播放下一张是用num控制的,和前面的li点击没有联系

我已经快写不下去了...

脑袋一片浆糊

我们在点击左右箭头时,就将index赋值给num和circle,这样才能实现同步.

最后再将向左的也写一下:

现在做最后一个模块,让轮播图在没有点击的情况下自动播放,做完就去玩手机!!!

第三条让我欣喜如狂~

想到自动播放,那就先设置一个定时器:

就是这么简单!!

当鼠标在focus上时清除定时器,移开时继续:

清除时让timer = null最合适.

看看效果,因为GIF不能太大,所以我就加快速度

最后的效果:

over!明天复习一遍!!!先去洗澡