js幻灯片的实现_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">

var img_list = document.getElementById('img_list');
setInterval(function(){
img_list.appendChild(img_list.firstChild);
},500)

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

var img_list = document.getElementById('img_list');
img_list.style.left = 0;
setInterval(function(){
img_list.style.left = parseInt(img_list.style.left) == -0 ? 0: (parseInt(img_list.style.left) - 320 + 'px');
},500)




上面的demo突兀，感觉不好，于是可以加上平滑的移动效果。
所谓平滑的移动效果其实就是把上面第二个demo的每一大步分解为若干个小的部分，把一次移动320px分成50次来执行；
demo_3：
代码如下:
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

var img_list = document.getElementById('img_list');
img_list.style.left = 0;
setInterval(function(){
for(var i = 0 ; i < 100 ; i++){
(function(pos){
setTimeout(function(){
img_list.style.left = parseInt(img_list.style.left) == -0 ? 0: -pos/100 * 0+'px';
},(pos + 1)*10)
})(i)
}
},1500)




对于demo_1的情况，我们可以不断缩减firstChild的宽度，以此达到类似demo_3的效果。
demo_4
代码如下:
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

var img_list = document.getElementById('img_list');
setInterval(function(){
var current = img_list.children[0];
for(var i = 0 ; i < 100 ; i++){
(function(pos){
setTimeout(function(){
current.style.width = 320 - (pos/100)*320 + 'px';
},(pos + 1)*10)
})(i)
}
setTimeout(function(){
img_list.appendChild(current);
current.style.width = '320px';
},1010);
},1500)




上面几种，方式原理都差不多，另外还可以设置透明渐变，让一张图片透明度从1国度到0 ，于是也可以产生切换效果，代码改动也很小。
demo_5：
代码如下:
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

var img_list = document.getElementById('img_list');
setInterval(function(){
var current = img_list.children[0];
for(var i = 0 ; i < 100 ; i++){
(function(pos){
setTimeout(function(){
current.style.opacity = 1 - (pos/100)*1;
},(pos + 1)*10)
})(i)
}
setTimeout(function(){
img_list.appendChild(current);
current.style.opacity = 1;
},1010);
},1500)




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










var img = document.getElementById('img');
var wrap = document.getElementById('wrap');
img.onload = function(){
console.dir(img);
var h = img.naturalHeight;
var w = img.naturalWidth;
newPanel(w,h);
}
function newPanel(w,h){
var cols = 10;
var rows = 10;
var colWidth = Math.floor(w/cols);
var rowHeight = Math.floor(w/rows);
for(var row = 0; row < rows; row++){
for(var col =0; col < cols; col++){
var div = document.createElement('div');
div.style.width = colWidth + 'px';
div.style.height= rowHeight + 'px';
div.className= 'sep';
div.style.backgroundImage = 'url(' + img.src + ')';
div.style.backgroundPosition = -colWidth*col +'px ' + -rowHeight*row +'px' ;
wrap.appendChild(div);
}
}
}
setTimeout(function(){
setInterval(function(){
wrap.lastChild && wrap.removeChild(wrap.lastChild);
},50)
},1000)

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

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