【JS】原生淘宝轮播图实现总结

一.实现思路

 实现效果：

1. css

将垂直排列的多张图片水平排列，可以使用浮动；或将包裹图片的盒子设置为行内块元素inline-block，并消除空白折叠。

2. js

1) 如何让图片水平移动?

将包裹所有图片的总容器设置为绝对定位，通过修改left属性展示需要的图片，切换left属性时一般使用过渡效果transition；

2) 首尾如何无缝切换图片?

在最后一张图片之后加上第一张轮播图，当显示添加的第一张轮播图后将left属性修改为真正第一张轮播图的left值，切换时取消过渡效果；同理在第一张轮播图之前加上最后一张轮播图...

3) 轮播图切换细节?

每次切换一张轮播图是以一张轮播图的宽度为单位，改变容器left值；通过设置全局属性index，指定偏离量，如：显示第一张图即index=1，left = '-' + index * picWidth + 'px'，图片左移一张需要将index++，右移一张图片需要将index--。

4) 自动播放和圆点切换原理? 

将左移一张图片和右移一张图片各封装成函数leftMoveSwiper()和rightMoveSwiper()，自动播放时设置定时器，定时执行leftMoveSwiper()，鼠标进入轮播图区域时取消定时器clearInterval(timer)，改为手动切换模式；

随后获取圆点的下标索引，找到原点下标和index之间的对应关系，修改index值，随后调用一次leftMoveSwiper()切换到指定的位置。

5) 圆点切换如何使用事件委托?

使用事件委托，将点击事件绑定给原点的父容器wrapper，通过事件对象event.target获取点击的目标元素，通过event.target.classList.contains(‘指定类名’)判断是否为需要操作的目标元素(即圆点)。

3.代码

html部分：

<div class="app">
    <ul class="wrapper">
        <li class="liWrapper">
            <a href="#" class="link">