图片切换，几乎每个网站都会有这种效果。效果形式多种多样，包括滚动切换(无缝滚动)、渐变切换、马赛克切换等等，每种效果又有很多变种。下面讨论几种最基本的形式。

1、无缝滚动

    很多网站首页上的图片切换就是半自动的无缝滚动的效果：轮播区域有几个缩略图或者编号，鼠标移动到编号或者缩略图上就切换到该图片，鼠标移动到图片上就停止切换，鼠标移开的时候再开始切换；图片两边有左右的箭头，点击箭头，可以直接切换到上一张下一张…

不管效果多复杂，基本原理还是无缝滚动

1.1、最普通的一种方法就是复制一份做滚动吧，点击查看代码。

1.2、还有一个不用新增元素的方法，就是不断移动，比如： 点击这里查看代码 这个是第一次考虑图片轮播时的想出的办法，现在看当时的代码，有很多不规范的地方。只是看个大概意思就够了，这种方法在做复杂效果的时候是不占优势的，多考虑第一种方法吧。

2、渐变切换
上边的例子中改变的是位置，改变透明度又是一种形式。 基本原理如下：切换图片时，当前图片透明度从1递减为0，下一张图片透明度从0递增到1，两个过程重叠发生；结束后，改变两张图片的层级。
点击查看代码

3、马赛克切换
    所谓马赛克切换，实际上是用切片实现的，就是一个个的小块，切换图片的时候，操作的是小块儿。结合 CSS3 还能做出爆炸效果。

3.1、用该原理实现拉幕效果，点击查看代码。

3.2、真正的马赛克效果，点击查看代码。

注：…在文章里边插入 jsfiddle 真是噩梦… 所以都改成链接了。