通过CSS3代替JavaScript实现纯粹的图片轮播效果

通过CSS3代替JavaScript实现纯粹的图片轮播效果

在我所接触到编写网页代码的时候，第一个接触到的就是团立方案例，它里面有一个图片轮播效果，是通过JavaScript来实现的，而且需要编写的代码特别多还要各种地方调用所以显得特别麻烦。

后来接触编程久了，也接触到了很多新的编程知识，也见识了很多编程的案例，发现有的一些只是纯粹的图片轮播，没有单击切换图片的效果，也没有鼠标滑进划出的一些事件，这种也通过用JavaScript来实现效果，原本我是不以为然的，觉得这种动态动漫类型的效果应该只能通过JavaScript来实现，这个想法随着我接触的知识越来越多慢慢的被打破了，它（这个想法）在我的认识中一直存活到我接触了一个CSS3的动漫效果，这个CSS3的动漫效果是我在接触一个名为[网上订餐系统]的案例中学习到的，它通过一个纯CSS3样式来让某一个元素发生一个移动的动漫效果，而且代码特别简单又少，如下图：

对比上面2张图片的箭头位置可看出箭头图片发生过移动。

上述图片就是纯CSS3实现图片移动的动漫效果的代码。

我想，如果是那种纯粹的图片切换播放的轮播，能不能通过这种方式来完成轮播效果，经过我自己不断的探索，终于得出来了结果，那就是—“如果是那种没有鼠标单击或者鼠标滑进滑出事件的纯图片的轮播效果完成可以通过这种方式来实现纯图片的动漫轮播效果”，而且需要编写的代码很少也很简单，所以编写代码时又快又容易。

1.首先-我们得完成HTML的布局和CSS3的样式，跟原本通过JavaScript来完成轮播效果的样式一样，只不过在它的基础上是不需要元素ID和一些伪图片（也就是轮播第一张图片的前面那一张和轮播图片最后面的那一张的后面一张，简单点来说就是HTML里面的轮播代码里的第一张和最后一张）和那个style的负的left的值，其实就是可以把元素ID去掉和轮播图片的伪图片还有style的负的left的值去掉，如下图：图一为通过JavaScript来实现轮播效果的HTML源代码，图二为已经去掉多余代码（元素ID和轮播图片的伪图片和style的负的left的值去掉）

				图一      

                               图二 

2.创建一个新的CSS3文件或者打开一个已经被目前这个HTML引用了的CSS3文档，输入CSS3代码如下图：

通过改变它X轴的像素来实现纯图片轮播效果，上图划线部分就是每次它移动的距离，把它移动的距离设置成轮播图片的宽度，每移动一次就+一次图片的宽度，从而实现了图片播放的轮播效果，

例如图片的宽度是670px，开始的原位是0px,然后第一次移动的位移就是670px，第二次移动的位移就是670px+670px=1340px,第三次移动的位移就是670px+670px+670px=2010px,第四次移动的位移就是670px+670px+670px+670px=2680px;

3. 如果需要它变成无限循环自动播放轮播效果，就给它添加一个无限播放代码如下图所示
   

然后这样一个通过纯粹的CSS3来完成的纯图片轮播动漫效果就出来了，

上面图片为完成效果时的截图
这个方法只适用于没有单击事件和鼠标滑进滑出事件的纯粹的图片轮播。