之前写了从左向右滑动的轮播图，发现图片从最后一张滑到第一张效果不太好，于是又写了淡入淡出效果的轮播图，主要是利用CSS3的特性transition。

　　将图片叠加在一起，每次只有显示的图片透明度为1，其余的透明度都设置为0。 点击查看效果

　　nav为总容器，第一个ul列表#index为小圆点列表，鼠标覆盖哪个小圆点就显现第几张图片，on是一个给小圆点添加背景颜色属性的类；第二个ul列表#img为图片列表，opa-on是给图片设置透明度为1的类。

　　这里需要注意nav和ul#img设置的宽度均为720px，即一张图片的宽度。而且必须设置#img li中的position:absolute的设置，这个样式让图片均叠加在一起，图片之间没有先后顺序。如果position设置为relative，会因为li出现的先后关系只显示第一张图片，不管这张图片是显示还是隐藏，后面的图片会一直被第一张图片覆盖。

　　transition是css3的样式， 它允许css的属性值在一定时间内平滑的过渡。 语法是这样的：transition: property duration timing-function delay 　　property：是css的属性值，比如opacity、border-radius等，也可以是all，表示所有的css属性。 　　duration：表示过渡的时间。 　　timing-function：表示执行动画的函数。 　　delay：表示执行动画的延迟时间。 transition: opacity 1s ease-in;表示opacity在1s内以ease-in的函数实现过渡效果。

　　图片移动的函数和小圆点移动的函数是差不多的，只不过是类的区别，一个是on，另一个是opa-on。先清除之前的样式，然后在当前图片或小圆点的li上动态添加样式。