关于轮播图

1.事件绑定

<li onclick="move()"></li>
左边是事件，右边是处理函数，需要加括号，如果要获取事件对象，就把event传进去，如果要获取this，就把this传进去。

2.HTML自定义属性
要获取标签的自定义属性，要用getAttribute()，修改要用setAttribute()。

3.给DOM元素增加或者删除class用DOM.classList.remove/add。

4.e.target和e.currentTarget的区别。
e.target是指触发事件的元素，e.currentTarget是指绑定事件的元素。如果没有冒泡或者捕获，他们是一致的，如果有冒泡或者捕获，他们就不一定一致。
事件冒泡阶段，e.currenttarget和e.target是不相等的，但是在事件的目标阶段，e.currenttarget和e.target是相等的

5.event.target.tagName是大写，需要转换成小写 toLowerCase() 转成大写toUpperCase()

6.li标签中间有空格，不要用display:inline-block，用float: left，这样就没有空格了。

7.关于transition过渡效果，第一次点击都没有过渡效果，后面再次点击才有过渡效果。
解决方法是一开始就给定left: 0; position: absolute；
每次点击向左移动，offsetLeft不是400px的倍数，也有可能是这个原因。

8.用transition来做过渡动画，频繁触发transition可能会使轮播图移动不到位，需要增加判断和延时解锁来帮助解决这个问题。

9.DOM.style.left属性不能储存起来使用

10.mouseenter和mouseleave要用addEventListener来绑定事件。

11.setInterval(move(‘left),1000)。这里setInterval只运行了一次，因为move('left)没有返回值，所以只调用了一次。setInterval(move,1000),如果要传参，可以这样写:setInterval(move,1000,'left)

12.js线程和渲染线程是互斥的，所以利用js来改变style.left的时候没有中间态，例如没有办法知道transition有没有改变，如果改变了transition，那就是触发reflow来感知transition改变了，利用offsetWidth等。

13.判断最后一张图片时，currentIndex和pic.length的关系，5张照片,pic.length = 5，第一张和最后一张相同，初始化currentIndex为0 ，调用move的时候，currentIndex++，然后再运动，运动到最后一张的时候，currenIndex = 4,pic.length=5，所以判断最后一张图片的时候，currentIndex == pic.length + 1,先判断再移动和先移动再判断，currentIndex和length的关系有点区别。