JavaScript实现幻灯片的简单实例

摒弃其他的效果，最简单的轮播也就只有一条语句：
parent.appendChild(parent.firstChild)，不断的把列表的一个元素添加到最后一个，appendChild会将节点从原来的位置移除，所以借此可以产生切换效果。
一点，IE对文本的文本节点与其他的浏览器不同，在获取子节点的时候需要注意，另外在不同版本的FF中，children这个属性也需要注意。
下面的demo没有设置#view的overflow:hidden。

demo_1：

代码如下:

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

（上面的demo其实可以不用浮动，仅为了后面的演示）
另一种方式就是不改变节点顺序，把整个列表向某个方向移动（不断改变列表的left属性），
demo_2：

代码如下:

上面的demo突兀，感觉不好，于是可以加上平滑的移动效果。
所谓平滑的移动效果其实就是把上面第二个demo的每一大步分解为若干个小的部分，把一次移动320px分成50次来执行；
demo_3：

代码如下:

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

对于demo_1的情况，我们可以不断缩减firstChild的宽度，以此达到类似demo_3的效果。
demo_4

代码如下:

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

上面几种，方式原理都差不多，另外还可以设置透明渐变，让一张图片透明度从1国度到0 ，于是也可以产生切换效果，代码改动也很小。
demo_5：

代码如下:

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

至于其他各种绚丽的效果，经过一些其他的组合处理就可以了。
一种处理方法就是把图片分割成n个区域，将背景都设置为需要显示的图片，然后在不同的区域显示对应的背景。这样一来，一张100*100的图片，可以被分割成100个10*10的小方块，再对这些方块来进行处理，得到的效果就会更多。理论上还可以分成10000个1*1的小点，但是浏览器会爆掉&＃183;&＃183;
demo_6：

代码如下:

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

演示而已，具体的宽度和排列需要自己再组织下。或者消除，或者遮罩，对应不同的排列组合，其他的方式也比较好实现。
最后，大家都懂的，CSS3也可以实现一些幻灯片效果，
demo_7:

代码如下:

"http://www.w3.org/TR/html4/loose.dtd">

• 总结：
  

  本文使用了很多的实例来讲解了Javascript实现幻灯片的操作，相信小伙伴么通过对本文的学习，对幻灯片的实现以有了一定的了解！

  相关推荐：

  php+Javascript幻灯片生成代码

  Javascript实现图片切换的幻灯片效果源代码

  JS实现淘宝幻灯片效果的实现方法

  以上就是Javascript实现幻灯片的简单实例的详细内容，更多请关注其它相关文章！