幻灯片的效果

jquery-幻灯片效果-编辑中

原理介绍

幻灯片

有多张图片

jquery-幻灯片效果-编辑中

jquery-幻灯片效果-编辑中

jquery-幻灯片效果-编辑中

结构

jquery-幻灯片效果-编辑中

样式

jquery-幻灯片效果-编辑中

jquery-幻灯片效果-编辑中

JQ代码

获取li标签

jquery-幻灯片效果-编辑中

让第一张保留在原位。其它几张都移到右边去

每一张幻灯图片的宽度是760象素

jquery-幻灯片效果-编辑中

让除了第一个的其它成员,移动到右边

jquery-幻灯片效果-编辑中

关于幻灯片上的点点

是动态创建上去的

后面如果有几个幻灯片,就做几个点点上去
jquery-幻灯片效果-编辑中

获取幻灯片个数

获取点点的容器

jquery-幻灯片效果-编辑中

创建点点,根据幻灯片的长度

并且给第一个点点添加一个样式
jquery-幻灯片效果-编辑中

jquery-幻灯片效果-编辑中

目标:

先做一个,点击点点,让幻灯片轮到对应的图片上面

错误的写法

jquery-幻灯片效果-编辑中

错误的原因。 点点还没有创建。获取不到。。。。

正确的写法

jquery-幻灯片效果-编辑中

点点被点击后,对应序号的图片位置要对应

jquery-幻灯片效果-编辑中

思考,图片如何变化

一个图片要走,一个图片要来

可以考虑,使用两个变量来存

jquery-幻灯片效果-编辑中

nowli,过来的

preli,要走的

点击哪个小点点,先拿它的索引值

得到的索引值,

jquery-幻灯片效果-编辑中

把所有的运动相关的操作,封装在一个函数中

jquery-幻灯片效果-编辑中

关注,小点点的点击方向不同,移动的效果不同

如果从左往右点小点点

那么,图片效果是从右边往左边滑动

反之,则是从左边往右边滑动

jquery-幻灯片效果-编辑中

明确nowli与prevli的用途

prevli代表了当前显示中的一个索引序号,这也是马上要离开的序号

nowli,代表了被点击的小园点的序号,代表了马上要进入用户视野的序号,

问题,被点击的小园点没有样式

解决

jquery-幻灯片效果-编辑中

反着点,从右边往左边点小园点时的写法

jquery-幻灯片效果-编辑中

如果同时点两下一个点,会出现bug

jquery-幻灯片效果-编辑中

考虑到这种bug出现的情况

我们就把它过滤掉就好

jquery-幻灯片效果-编辑中

左右按钮

如果当前是第三个图片,点击左边按钮,应该变到第二个图片

结构

jquery-幻灯片效果-编辑中

按钮获取

jquery-幻灯片效果-编辑中

给事件

jquery-幻灯片效果-编辑中

动画实现的效果,主要依赖于nowli的数值

所以在这里直接对nowli进行值的修改就可

当前代码的bug,没有边界值判断,越界后出bug

左边边界的判断

左边到头时

jquery-幻灯片效果-编辑中
jquery-幻灯片效果-编辑中

右边到头时

jquery-幻灯片效果-编辑中

由于边界的处理情况与普通逻辑不同,所以需要加上一个return,阻止代码继续向后走

左右按钮与圆点状态的对应

jquery-幻灯片效果-编辑中

jquery-幻灯片效果-编辑中

自动播放

思路,开定时器

让定时器,自动的去触发左或者右键的点击事件

先定义一个全局变量,存定时器的

jquery-幻灯片效果-编辑中

定时器创建

让它执行左右键相同的代码

jquery-幻灯片效果-编辑中

鼠标悬停,停止图片的轮播

相关文章: