轮播图

关于轮播图,有很多种写法,我自己是根据下标来写的。

思路方面:需要定义一个 var idx = 0;来控制显示的图片下标,需要一个当前图片切换下一张图片的动画,还需要一个自动切换的定时器,然后html部分需要把第一张图片复制放到最后,在把最后一张图片复制放在开始。

先把基本轮播图的布局写出来





以上基本布局,下面是javascript部分


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


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


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


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


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


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


最后在执行自动轮播

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

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容