今天在群里看到有人要幻灯片的代码，于是我自己也想了想，做个总结。常见的幻灯片切换无非就是轮播和渐变，不管哪种都是用定时器来逐步改变图片或者图片组的某种属性来实现的

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

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

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

下面的演示没有设置#查看的溢出：隐藏。

演示1:复制代码代码如下：DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN ' ' http://www。w3。org/TR/XHTML 1/DTD/XHTML 1-过渡。DTD ' html head meta http-equiv=' Content-Type ' Content=' text/html；charset=utf-8 '/title/title style type=' text/CSS ' * { margin:0；填充：0;} ul{列表样式：无；} # view { position:relative；宽度：320像素高度：120像素左边距：320像素边框：10px纯色# bc8f8f } #查看：在{内容：' . '之后；显示：块；明确：两者都有；高度：0;可见性：隐藏；} # img _ list { position:absolute；宽度：960 px } # img _ list Li { float:left；宽度：320像素高度：120像素} #a{背景：# 87ceeb} #b{背景：# ff69b4} #c{背景：# 98fb 98 }/style/head body div id=' view ' ul id=' img _ list ' Li id=' a '/Li Li id=' b '/Li Li id=' c '/Li/ul/div script type=' text/JavaScript ' var img _ list=document。getelementbyid(' img _ list ')；setInterval(function(){ img _ list。appendchild(img _ list。第一胎))；},500)/脚本/正文/html

（上面的演示其实可以不用浮动，仅为了后面的演示)另一种方式就是不改变节点顺序，把整个列表向某个方向移动（不断改变列表的左边的属性),演示_2:复制代码代码如下：html head meta http-equiv=' Content-Type ' Content=' text/html；charset=utf-8 '/title/title style type=' text/CSS ' * { margin:0；填充：0;} ul{列表样式：无；} # view { position:relative；宽度：320像素高度：120像素左边距：320像素边框：10px纯色# bc8f8f } #查看：在{内容：' . '之后；显示：块；明确：两者都有；高度：0;可见性：隐藏；} # img _ list { position:absolute；宽度：960 px } # img _ list Li { float:left；宽度：320像素高度：120像素} #a{背景：# 87ceeb} #b{背景：# ff69b4} #c{背景：# 98fb 98 }/style/head body div id=' view ' ul id=' img _ list ' Li id=' a '/Li Li id=' b '/Li Li id=' c '/Li/ul/div script type=' text/JavaScript ' var img _ list=document。getelementbyid(' img _ list ')；img _ list。风格。左=0；setInterval(function(){ img _ list。风格。left=parse int(img _ list。风格。左)==-640？0:(parse int(img _ list。风格。左)-320 ' px ')；},500)/脚本/正文/html上面的演示突兀，感觉不好，于是可以加上平滑的移动效果。所谓平滑的移动效果其实就是把上面第二个演示的每一大步分解为若干个小的部分，把一次移动320像素分成50次来执行；演示3:复制代码代码如下：DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN ' ' http://www。w3。org/TR/XHTML 1/DTD/XHTML 1-过渡。DTD ' html head meta http-equiv=' Content-Type ' Content=' text/html；charset=utf-8 '/title/title style type=' text/CSS ' * { margin:0；填充：0;} ul{列表样式：无；} # view { position:relative；宽度：320像素高度：120像素左边距：320像素边框：10px纯色# bc8f8f } #查看：在{内容：' . '之后；显示：块；明确：两者都有；高度：0;可见性：隐藏；} # img _ list { position:absolute；宽度：960 px } # img _ list Li { float:left；宽度：320像素高度：120像素} #a{背景：# 87ceeb} #b{背景：# ff69b4} #c{背景：# 98fb 98 }/style/head body div id=' view ' ul id=' img _ list ' Li id=' a '/Li Li id=' b '/Li Li id=' c '/Li/ul/div script type=' text/JavaScript ' var img _ list=document。getelementbyid(' img _ list ')；img _ list。风格。左=0；setInterval(function(){ for(var I=0；I 100 I){(function(pos){ setTimeout(function(){ img _ list。风格。left=parse int(img _ list。风格。左)==-640？0:-pos/100 * 640 ' px '；}，(pos 1)*10) })(i) } }，1500) /script /body /html对于演示_1的情况，我们可以不断缩减第一个孩子的宽度，以此达到类似演示_3的效果。演示_4复制代码代码如下：DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN ' ' http://www。w3。org/TR/XHTML 1/DTD/XHTML 1-过渡。DTD ' html head meta http-equiv=' Content-Type ' Content=' text/html；charset=utf-8 '/title/title style type=' text/CSS ' * { margin:0；填充：0;} ul{列表样式：无；} # view { position:relative；宽度：320像素高度：120像素左边距：320像素边框：10px纯色# bc8f8f } #查看：在{内容：' . '之后；显示：块；明确：两者都有；高度：0;可见性：隐藏；} # img _ list { position:absolute；宽度：960 px } # img _ list Li { float:left；宽度：320像素高度：120像素} #a{背景：# 87ceeb} #b{背景：# ff69b4} #c{背景：# 98fb 98 }/style/head body div id=' view ' ul id=' img _ list ' Li id=' a '/Li Li id=' b '/Li Li id=' c '/Li/ul/div script type=' text/JavaScript ' var img _ list=document。getelementbyid(' img _ list ')；setInterval(function(){ var current=img _ list。儿童[0]；for(var I=0；I 100 I){(function(pos){ setTimeout(function(){ current。风格。宽度=320-(pos/100)* 320 ' px '；} 、( pos 1)* 10)})(I)} setTimeout(function(){ img _ list。appendchild(当前)；当前。风格。width=' 320 px},1010);},1500)/脚本/正文/html上面几种，方式原理都差不多，另外还可以设置透明渐变，让一张图片透明度从一国度到0 ,于是也可以产生切换效果，代码改动也很小。

演示5:复制代码代码如下：DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN ' ' http://www。w3。org/TR/XHTML 1/DTD/XHTML 1-过渡。DTD ' html head meta http-equiv=' Content-Type ' Content=' text/html；charset=utf-8 '/title/title style type=' text/CSS ' * { margin:0；填充：0;} ul{列表样式：无；} # view { position:relative；宽度：320像素高度：120像素左边距：320像素边框：10px纯色# bc8f8f } #查看：在{内容：' . '之后；显示：块；明确：两者都有；高度：0;可见性：隐藏；} # img _ list { position:absolute；宽度：960px} #img_list李{位置：绝对；top:0；左：0;宽度：320像素高度：120像素} #a{背景：# 87ceeb} #b{背景：# ff69b4} #c{背景：# 98fb 98 }/style/head body div id=' view ' ul id=' img _ list ' Li id=' a '/Li Li id=' b '/Li Li id=' c '/Li/ul/div script type=' text/JavaScript ' var img _ list=document。getelementbyid(' img _ list ')；setInterval(function(){ var current=img _ list。儿童[0]；for(var I=0；I 100 I){(function(pos){ setTimeout(function(){ current。风格。不透明度=1-(pos/100)* 1；} 、( pos 1)* 10)})(I)} setTimeout(function(){ img _ list。appendchild(当前)；当前。风格。不透明度=1；},1010);},1500)/脚本/正文/html至于其他各种绚丽的效果，经过一些其他的组合处理就可以了。一种处理方法就是把图片分割成n个区域，将背景都设置为需要显示的图片，然后在不同的区域显示对应的背景。这样一来，一张100*100的图片，可以被分割成100个10*10的小方块，再对这些方块来进行处理，得到的效果就会更多。理论上还可以分成10000个1*1的小点，但是浏览器会爆掉演示6:复制代码代码如下：DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN ' ' http://www。w3。org/TR/XHTML 1/DTD/XHTML 1-过渡。DTD ' html head meta http-equiv=' Content-Type ' Content=' text/html；charset=utf-8 '/title/title style type=' text/CSS ' * { margin:0；填充：0;边框：0;} body { padding:50px；} .sep { float:left；边距：1px 1px 0 0 }/style/head body img id=' img ' src='./动画/苹果。jpg ' alt=' '/div id=' wrap ' style=' position:relative；'/div script type=' text/JavaScript ' var img=document。getelementbyid(' img ')；var wrap=文档。getelementbyid(“wrap”)；img。onload=function(){ console。dir(img)；var h=img . naturalheightvar w=img . naturalwidthnewpanel(w，h)；} function newPanel(w，h){ var cols=10；变量行数=10;var col width=数学。地板(宽/列)；var行高=数学。地板(宽/排)；for(var row=0；行行数；row){ for(var col=0；col cols coll){ var div=document。createelement(' div ')；div。风格。width=列宽度' px '；div。风格。height=行高' px '；sep '；div。风格。背景图像=' URL(' img。src“)”；div。风格。背景位置=-col width * col ' px '-row height * row ' px '；包装。appendchild(div)；} } } setTimeout(function(){ setInterval(function(){ wrap。最后一个儿童包装。移除孩子(包装。最后一个孩子))；},50) },1000)/脚本/正文/html

演示而已，具体的宽度和排列需要自己再组织下。或者消除，或者遮罩，对应不同的排列组合，其他的方式也比较好实现。最后，大家都懂的，CSS3也可以实现一些幻灯片效果，演示_7:复制代码代码如下：DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 4.01 Transitional//EN ' ' http://www。w3。org/TR/HTML 4/loose。DTD ' HTML head meta http-equiv=' Content-Type ' Content=' text/HTML；charset=utf-8 '/title/title style type=' text/CSS ' * { margin:0；填充：0;} #测试{位置：相对；宽度：300像素高度：200像素溢出：隐藏；边框：1px纯色# d4d4d4} #测试ul {位置：绝对；top:0；左：0;高度：200px} #测试ul Li { float:left；宽度：300像素高度：200 px } @-网络工具包-关键帧我的动画{ 0% { top:0；} 40% { top:-200 px；} 70% { top:-400 px；} 100% { top:-600 px；} } #测试ul {-WebKit-animation-name:我的动画；-网络工具包-动画-时长：4s；-网络工具包-动画-计时-功能：线性；-网络工具包-动画-迭代-计数：无穷大；}/style/head body div id=' test ' ul Li img width=' 300 ' height=' 200 ' src='./image/a . jpg ' alt=' '//Li Li img width=' 300 ' height=' 200 ' src='./image/a . jpg ' alt=' '//Li Li img width=' 300 ' height=' 200 ' src='./image/a . jpg ' alt=' '//Li Li img width=' 300 ' height=' 200 ' src='./image/a . jpg ' alt=' '//Li/ul/div/body/html

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

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。