js 幻灯片的实现_javascript技巧

摒弃其他的效果，最简单的轮播也就只有一条语句：

parent.appendChild(parent.firstChild)，不断的把列表的一个元素添加到最后一个，appendChild会将节点从原来的位置移除，所以借此可以产生切换效果。

一点，IE对文本的文本节点与其他的浏览器不同，在获取子节点的时候需要注意，另外在不同版本的FF中，children这个属性也需要注意。

下面的demo没有设置#view的overflow:hidden。

demo_1：

复制代码 代码如下:

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

• 
  
• 
  
• 
  

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

复制代码 代码如下:

• 
  
• 
  
• 
  

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

复制代码 代码如下:

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

• 
  
• 
  
• 
  

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

复制代码 代码如下:

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

• 
  
• 
  
• 
  

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

复制代码 代码如下:

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

• 
  
• 
  
• 
  

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

复制代码 代码如下:

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

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

复制代码 代码如下:

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

• 


• 


• 


• 

网上的例子很多，以后慢慢补充。