在我们日常的开发工作中，经常会遇到幻灯片切换、那么我们都知道常见的幻灯片切换无非就是轮播和渐变，不管哪种都是用定时器来逐步改变图片或者图片组的某种属性来实现的，今天就带大家介绍下javascript实现幻灯片的简单实例！
摒弃其他的效果，最简单的轮播也就只有一条语句：
parent.appendChild(parent.firstChild)，不断的把列表的一个元素添加到最后一个，appendChild会将节点从原来的位置移除，所以借此可以产生切换效果。
一点，IE对文本的文本节点与其他的浏览器不同，在获取子节点的时候需要注意，另外在不同版本的FF中，children这个属性也需要注意。
下面的demo没有设置#view的overflow:hidden。
demo_1：
代码如下:
（上面的demo其实可以不用浮动，仅为了后面的演示）
另一种方式就是不改变节点顺序，把整个列表向某个方向移动（不断改变列表的left属性），
demo_2：
立即学习“Java免费学习笔记（深入）”；
代码如下:
上面的demo突兀，感觉不好，于是可以加上平滑的移动效果。
所谓平滑的移动效果其实就是把上面第二个demo的每一大步分解为若干个小的部分，把一次移动320px分成50次来执行；
demo_3：
代码如下:
对于demo_1的情况，我们可以不断缩减firstChild的宽度，以此达到类似demo_3的效果。
demo_4
代码如下:
上面几种，方式原理都差不多，另外还可以设置透明渐变，让一张图片透明度从1国度到0 ，于是也可以产生切换效果，代码改动也很小。
demo_5：
代码如下:
至于其他各种绚丽的效果，经过一些其他的组合处理就可以了。
一种处理方法就是把图片分割成n个区域，将背景都设置为需要显示的图片，然后在不同的区域显示对应的背景。这样一来，一张100*100的图片，可以被分割成100个10*10的小方块，再对这些方块来进行处理，得到的效果就会更多。理论上还可以分成10000个1*1的小点，但是浏览器会爆掉··
demo_6：
代码如下:
@@##@@
HTML5实现的手动切换幻灯片动画特效源码是一段非常有创意的html5+css3 幻灯片切换特效，很早以前就非常喜欢的一款特效，最近刚刚找到，担心以后再也找不到了，赶紧上传上来，本段代码适应于所有网页使用，有需要的朋友们可以前来下载使用。
演示而已，具体的宽度和排列需要自己再组织下。或者消除，或者遮罩，对应不同的排列组合，其他的方式也比较好实现。
最后，大家都懂的，CSS3也可以实现一些幻灯片效果，
demo_7:
代码如下:
- @@##@@
- @@##@@
- @@##@@
- @@##@@
总结：
本文使用了很多的实例来讲解了JavaScript实现幻灯片的操作，相信小伙伴么通过对本文的学习，对幻灯片的实现以有了一定的了解！
相关推荐：
