鼠标不移动到显示的数字上时圖片自己根据设定的时间轮流播放，当鼠标移到某一个显示数字上显示该图片，并且停止播放鼠标移开，图片继续从该图片播放

本文主要介绍分别使用CSS3、JS实现图爿简单无缝轮播功效；

（实现一张一张的轮播肉眼只看见一张图片）

HTML部分比较简单，两个div下包着几个img标签；为了实现无缝轮播注意第┅张图片要与最后一张图片相同；

这样图片就可以轮播了，但是鼠标放上去的时候图片还是一直在轮播的如果我们想让鼠标放在图片上時，轮播停止或者出现一些信息，我们需要加上：hover;设置动画的状态代码很简洁：如下

这样我们的轮播效果就出来啦；

效果图什么的也懶得贴了；

（多张图片轮播，肉眼可以看到多张图片）

可以看到class="copyPic" 的DIV为空的没有内容，不急在JS部分会为他赋上内容，其内容与class="pic"的一样；當然我们也可以直接在HTML中为其添加内容；现在为其加上一点CSS样式吧

这样我们的基本样式就完成了，下面就开始实现轮播效果吧：

首先為了代码方便，先封装一个简单函数

好啦开始写轮播函数：

这样我们的图片就可以轮播啦，同样的如果希望鼠标放上去后轮播停止还需要加上几句代码，使用鼠标事件清除定时器

OK，这样我们使用JS实现图片轮播的效果也就完成了！