轮播图

作者: I_am_the_ZL | 来源:发表于2020-04-14 14:14 被阅读0次

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

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

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

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

    先定义下标、图片的长度、定时器 获取每个图片盒子的下标,在根据  下标 * 图片盒子宽度  得到left值 写一个方法,实现当前图片切换下一张图片的动画效果 先获取点的下标,在给点击的点添加class在执行move()方法,比如点击第一个点下标为0,但执行move()后下标为1了就变成了,下标为0图片执行动画到下标为1的图片 往左边切换,下标会不但增加,当下标大于等于图片长度时,让下标为0,图片的总父级的left恢复到默认第一张,否则就不但增加,然后点部分如果下标超过图片长度或者等于,就让第一个点添加class,否则就根据eq(idx)来添加class,然后move()执行切换动画 往右走和往左走逻辑一样,不多说 了 在给左右按钮添加点击事件 最后在执行自动轮播

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

    相关文章

      网友评论

          本文标题:轮播图

          本文链接:https://www.haomeiwen.com/subject/negzmhtx.html