关于轮播图,有很多种写法,我自己是根据下标来写的。
思路方面:需要定义一个 var idx = 0;来控制显示的图片下标,需要一个当前图片切换下一张图片的动画,还需要一个自动切换的定时器,然后html部分需要把第一张图片复制放到最后,在把最后一张图片复制放在开始。
先把基本轮播图的布局写出来
以上基本布局,下面是javascript部分

先定义下标、图片的长度、定时器

获取每个图片盒子的下标,在根据 下标 * 图片盒子宽度 得到left值

写一个方法,实现当前图片切换下一张图片的动画效果

先获取点的下标,在给点击的点添加class在执行move()方法,比如点击第一个点下标为0,但执行move()后下标为1了就变成了,下标为0图片执行动画到下标为1的图片

往左边切换,下标会不但增加,当下标大于等于图片长度时,让下标为0,图片的总父级的left恢复到默认第一张,否则就不但增加,然后点部分如果下标超过图片长度或者等于,就让第一个点添加class,否则就根据eq(idx)来添加class,然后move()执行切换动画

往右走和往左走逻辑一样,不多说 了

在给左右按钮添加点击事件

最后在执行自动轮播
这就是一个简单轮播图了,还可以增加移入这个轮播盒子取消定时器,移开在执行定时器。这样应该算是一个基本的定时器了。