普通轮播图

内容样式行为分离

内容控制样式，会使得结构混乱不清晰，容易出错；样式负责内容，会使得js获取不到内容，同时我也选不中，样式负责行为逻辑，会使得css变得很难；行为控制样式，例如$div.hide();$div.show()show到底是显示display:block还是disploy:flex即使是hide()时先获取，那么我如果hide时为display：none而show()时想用display:flex呢？所以$div.hide();$div.show()这两个标签绝对禁用,js控制html会导致使用难用的原生dom，导致会踩坑。

占位符

图片最好先固定住一个宽或者高，这样把位置先占住，防止图片加载后其他的图片往后退给其让位，浪费性能。

图片的宽度是很重要的，高度如果知道的话，最好也写上。

几个常用的jQuery API

1. var index = $(x.currentTarget).index() 可以获取当前目标的排序，即当前目标在所有子节点中的顺序（0开始）
2. allButtons.eq()等价于$(allButtons)
3. .trigger()后面可以接任何的事件，比如说.trigger('click')
4. .css({''})可以用行为操作样式，因为样式都是相同的重复的，所以破例

踩坑

1. jQuery的script要放在</body>后面，这样先引用jQuery然后再自己的main.js使用。
2. 自己的mian.js要放在页面最下，</body>后面，等页面加载完毕再使用，否则会获取不到元素element
3. link的css写在head里面

无缝轮播

用走马灯的思想来理解轮播图

踩坑

'n'和n

'n'和n是什么区别呢？一个是常亮字符串'n'一个是容器变量n。一个就是'n',一个可能是任何东西可以改变。如果n=1,那么'n'是几呢？**答案：**是'n',而不是'1'

在用jQuery传入选择器的时候，

,此时使用${n}来表示容器变量n的数值，注意此时不是使用''而是(``),1左边的键位来搭配${}