web前端经典教程之精彩遍历

      在网页中，我们经常可以看到一些按顺序自动切换的图片。有的是同一区域的内容切换，有的是并列区域的顺序切换。然后鼠标划上去，切换停止，鼠标离开后又继续执行切换。很是抢眼，这种效果多半是通过遍历图片数量和使用定时器实现的。其中有很多细节不一样，下面我给大家汇总了几个实例。

《原地切换篇》

1. 可以看到同一位置的图片可以自动切换，然后在网页中我们想细致观察时，鼠标停放到图片上，图片切换停止。当然下图是模拟的gif动画，是没有这个功能的。

2. 图片素材如下, 有12张可供变换的图片，对应下方javascript代码里的(num == 12 );

3. 所用javasript代码如下，具体意思请看对应的注释。

《定时器为准篇》

1. 效果如下所示, 跟上面不同的是，鼠标滑过划到其中的任何一张时，自动切换会停止，但是效果依然起作用，此时以用户鼠标滑过为主，一旦鼠标离开后，自动切换会以原先自动切换时运行到的图片为准，并向后传递。

2. 素材图片如下所示。

3. css样式如下所示，可以看到一个hover动画。

《用户为准篇》

1. 除了排列方式上跟上一效果有区别之外，最本质的差别则是经过用户滑过后到底以谁为准，本案例以用户鼠标最后离开的那个按钮为准，并向后传递。

2. 素材图片如下所示。

3. html结构如下所示。

另外，再给大家补充两个设计灵感吧！

附高清实操视频