简单实现js轮播图

制作轮播图非常简单,首先我们先准备一下css样式.

 1.需求说明

(1).点击上一张会将图片切换成上一张图片,点击下一张会切换成下一张图片.

(2).当图片为第一张时无法点击上一张,当图片为第一张时无法点击下一张.

(3).点击下面的圆形按钮直接跳转至对应序列的图片.

(4)图片区域每隔一段时间间隔会自动切换到下一张

2.代码实现

获取dom元素

 

1.图片之间的动画切换效果

在开始实现各种功能之前,我们需要知道的是每一个功能都伴随着图片之间的切换,所以我们可以先针对图片的切换去封装一个函数.代码如下:

 

 该函数有俩个形参,第一个参数e即为element表示需要运动的dom元素,第二个参数表示图片的需要去到的位置,也就是图片运动的结束位置.

首先分析一下,为了让图片从开始位置到结束位置切换的丝滑一点,我们可以通过让图片的位置每隔一段短暂的时间运动改变一点点坐标.用到了offsetLeft()方法.offsetLeft方法是元素相对于父元素的水平距离.end-start.offsetLeft/10是一个固定写法,让图片的位置能以一个曲形的速度运动到结束位置,再让元素与父盒子之间的距离等于这个数.

.然后setInterval(),方法是一个定时器方法,表示每隔一段时间执行一次函数,该方法有俩个参数,第一个参数放执行的函数,第二个参数放时间间隔.

定时器会有叠加的效果,所以需要清除上一个定时器.具体原因后面的功能会讲.

2.点击按钮切换图片

1.首先需要给俩个按钮绑定一个点击事件.需要注意的是我们切换图片的方法,由于css样式有一个装载左右图片的盒子,盒子宽度是所有图片float:left排列后的宽度和,然后在这个盒子上有一个父盒子,父盒子就是我们页面能看到的盒子,他的大小只有一张图片的大小,并且和父盒子设置一个溢出隐藏效果,让父盒子以外的盒子全部隐藏起来.

我们刚刚提到的offsetLeft属性,就是图片盒子相对于父盒子的距离,比如我这个图片盒子的宽度是600px,里面装了5张图片,每张图片都是宽度为120px,父盒子和图片一样大也是120px,当我们图片盒子与父盒子之间的距离是0时,显示第一张图片,当距离为-120px时显示第二张图片.

代码如下:

 

 首先声明了一个全局变量x,x表示图片宽度的倍数,点击下一张让x+1,上一张让x-1;最后在调用我们刚刚封装的动画切换函数.

3.点击圆形按钮直接切换图片

这个功能和点击按钮一样,不同的是点击按钮是让x+1或者-1,我们这个功能是直接给x赋值,比如点击第一个圆形按钮就让x=0,第二个就让x=1.怎么去获取赋给x的值这个是个难题,我们需要用到js的自定义属性方法.给每一个按钮添加一个自定义属性index,点按钮时获取当前点击按钮的index值并赋给x.再调用changeImg方法.代码如下:

 俩个for循环第一个for循环是给每一个ra注册一个点击事件并且添加一个自定义属性.第二个for循环是当ra被点击时先让所有的圆形按钮颜色初始化

4.自动切换下一张

自动切换其实可以看做每隔一段时间让下一张按钮自动被点击一次.代码比较简单,如下:

 这时我们的功能基本实现,现在只需要将我们遗忘的一些细节填补起来.

5.完善案例

1.当图片为最后一张时,让图片无缝切换到第一张

这个功能的实现其实有点巧妙,我们直接在最后一张图片后面添加一张第一张的图片,当图片轮播到最后一张时,js会以非常快的速度换到第一张,肉眼是无法察觉的.我们直接在下一张按钮里面添加

当图片为第一张时点击上一张是没有什么效果的.

代码如下:

 2.当图片开始轮播或者点击下一张上一张时,下面的圆形按钮的高亮效果也会随着图片去变化.