轮播

一，图片排成一排，向左一直切换，或向右一直切换，左右滚动无限循环原理

IMG20170330114314.jpg

IMG20170330114323.jpg

img_1.png

二，左右滚动无限循环

代码
预览

三，淡入淡出，渐变轮播效果

代码
预览

四，再看一个淡入淡出的算法

右按钮：

图片.png

左按钮：

图片.png

注意点：

1，

图片.png

2，注意区分选择器里面>和空格的区别
3，在js里面设置一个元素的宽度

  $ul.css({"width":num})

4，用了浮动一定要清除浮动
5，注意定位relative和absolute的使用
6，块和行：水平居中，垂直居中

7，轮播里面，按钮是a连接的话

图片.png

解决办法：
1）href="javascript: ;"
2）href="#"
3）使用事件的方法，阻止a连接的默认事件
8，使用js设置某个元素的宽度时，把js文件引入放到index.html最下面，打开页面出现白屏

图片.png

为什么能？
因为js里面的设置元素宽度没有设置成功，导致白屏，元素不能显示出来宽度为0，甚至可能一直白屏，元素不能显示出来，因为什么现在还不知道，猜测是js引擎没有运行
解决办法：

图片.png

图片.png

9，注意animate动画里面：

图片.png

10，

图片.png

搜藏

（1）可能是最厉害的轮播
预览
Github
（2）科技感十足的轮播
Demo
源码
（3）苹果风格的轮播
预览
英文教程