以下是用jQuery初步实现的轮播1.0效果，手动点击切图版，没有难点，做为笔记记录初学者需要遇到的一些值得注意的点：
1
2
一个有关页面优化的知识点：重排
3
1.网页加载 > 图片加载 > 加载过程中，如果图片未加载完或出现意外，就有占位符出现，直到图片加载完才会替换掉占位符；
2.如上图，如果图片2未加载完，图片3加载完，那图片3（W:400,H:300）就会向前占位 400px - 占位符宽度 ，直到图片2加载完，图片3就会往后挪动先前占位的距离，这个过程叫重排；
3.重排浪费性能，为了避免这种情况，采取的页面优化方案是：如果已知图片宽高，则添加样式，如：上图皆为400*300，则为其添加style：width=200px，height=300px
所以一般默认图片加上宽高；
以下正式进入实现自动轮播的正题：
Class、ID、样式先布局好，此次的主角是jQuery，其他的不多讲；
首先，要明确一个概念，html排列结构，css决定样式，JS控制行为，结构样式行为分离的好处多多。当过多的将样式内联在 html 中，当代码量达到一定量时，代码就会显得臃肿难看，毫无层次感，所以至始至终要记得：简洁明了的代码才是好代码！
轮播1.0效果中，图2 是用 JS 增删 class 达到控制 css 的效果，明确的样式行为分离，但是却存在了一个问题，如果轮播的图片过多，则样式的 position 也会跟着增加，就会使得代码繁杂，这时候就要打破只用JS控制行为的原则，转而用JS控制样式，用动态生成样式会更加合理，如此一来，哪怕图片再多也不需要调整样式了。
所以，通过JS实现动态控制样式的思路是：
0.获取所有按钮组成伪数组声明给allbutton；
1.遍历伪数组allbutton；
2.让伪数组allbutton变为jQuery对象，当点击伪数组allbutton其中的任意元素时，执行函数； // jQuery API 要用 jQuery对象
3.用jQuery API获取被点击的元素在伪数组中的序号，并声明给index变量；
4.index变量的值为序号，是numbere，根据图片宽度计算出需要位移的像素，并声明给 p；
5.获取 images ID选择器，为其增添样式，变化位移根据步骤4得出；
在以上的基础下就开始进一步的实现自动轮播吧
页面链接：皮卡丘自动轮播 demo
网友评论