关于轮播图，有很多种写法，我自己是根据下标来写的。
思路方面：需要定义一个 var idx = 0；来控制显示的图片下标，需要一个当前图片切换下一张图片的动画，还需要一个自动切换的定时器，然后html部分需要把第一张图片复制放到最后，在把最后一张图片复制放在开始。
先把基本轮播图的布局写出来
以上基本布局，下面是javascript部分
先定义下标、图片的长度、定时器
获取每个图片盒子的下标，在根据 下标 * 图片盒子宽度 得到left值
写一个方法，实现当前图片切换下一张图片的动画效果
先获取点的下标，在给点击的点添加class在执行move()方法，比如点击第一个点下标为0，但执行move()后下标为1了就变成了，下标为0图片执行动画到下标为1的图片
往左边切换，下标会不但增加，当下标大于等于图片长度时，让下标为0，图片的总父级的left恢复到默认第一张，否则就不但增加，然后点部分如果下标超过图片长度或者等于，就让第一个点添加class，否则就根据eq(idx)来添加class，然后move()执行切换动画
往右走和往左走逻辑一样，不多说 了
在给左右按钮添加点击事件
最后在执行自动轮播
这就是一个简单轮播图了，还可以增加移入这个轮播盒子取消定时器，移开在执行定时器。这样应该算是一个基本的定时器了。
网友评论