js幻灯片的实现

摒弃其他的效果，最简单的轮播也就只有一条语句：家长。appendchild(父级。第一个孩子)，不断的把列表的一个元素添加到最后一个，appendChild会将节点从原来的位置移除，所以借此可以产生切换效果。一点，IE对文本的文本节点与其他的浏览器不同，在获取子节点的时候需要注意，另外在不同版本的消防中孩子们这个属性也需要注意。下面的演示没有设置#查看的隐藏的飞越。演示1:复制代码代码如下：DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN ' ' http://www .w3。org/TR/XHTML 1/DTD/XHTML 1-Transitional。DTD ' html头元http-equiv=' Content-Type ' Content=' text/html；charset=utf-8 '/title/title style type=' text/CSS ' * { margin 3360 0；padd : 0；} ul { list-style :无；} #查看{位置：相对宽度： 320 px高度： 120像素；左边距left:320pxborder: 10px实心# bc8f8f} #视图：after在{ content:'之后；显示器：块；clear:两者；高度： 0;可见性：隐藏；} # img _ list { position :绝对值；宽度： 960 px} #img_list li{左侧浮动：宽度： 320 px高度： 120像素；} # a { background : # 87 ceeb } # b { background : # ff 69 B4；} # c { background : # 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脚本类型=' text/JavaScript ' var img _ list=document。getelementbyid(' img _ list ')；setInterval(function(){ img _ list }。appendchild(img _ list。第一个孩子))；},500)/脚本/正文/html

（上面的演示其实可以不用浮动，仅为了后面的演示)另一种方式就是不改变节点顺序，把整个列表向某个方向移动（不断改变列表的左边的属性),演示_2:复制代码代码如下： html头元http-equiv='内容-类型' Content=' text/html；charset=utf-8 '/title/title style type=' text/CSS ' * { margin 3360 0；padd : 0；} ul { list-style :无；} #查看{位置：相对宽度： 320 px高度： 120像素；左边距left:320pxborder: 10px实心# bc8f8f} #视图：after在{ content:'之后；显示器：块；clear:两者；高度： 0;可见性：隐藏；} # img _ list { position :绝对值；宽度： 960 px} #img_list li{左侧浮动：宽度： 320 px高度： 120像素；} # a { background : # 87 ceeb } # b { background : # ff 69 B4；} # c { background : # 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脚本类型=' text/JavaScript ' var img _ list=document。getelementbyid(' img _ list ')；img _ list。风格。left=0；设置间隔(函数(){ img _ list。风格。left=ParSeint(img _ list。风格。左)=-640？0:(ParSeint(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-Transitional。DTD ' html头元http-equiv=' Content-Type ' Content=' text/html；charset=utf-8 '/title/title style type=' text/CSS ' * { margin 3360 0；padd : 0；} ul { list-style :无；} #查看{位置：相对宽度： 320 px高度： 120像素；左边距left:320pxborder: 10px实心# bc8f8f} #视图：after在{ content:}之后；显示器：块；clear:两者；高度： 0;可见性：隐藏；} # img _ list { position :绝对值；宽度： 960 px} #img_list li{左侧浮动：宽度： 320 px高度： 120像素；} # a { background : # 87 ceeb } # b { background : # ff 69 B4；} # c { background : # 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脚本类型=' text/JavaScript ' var img _ list=document。getelementbyid(' img _ list ')；img _ list。风格。left=0；setInterval(函数(){ for(var I=0；I 100I){(function(pos){ setTimeout(function(){ img _ list。风格。left=parsent(img _ list。风格。左)=-640？0:-pos/100 * 640 ' px '；}，(位置1)*10) })(i) } }，1500)/脚本/正文/html对于演示_1的情况，我们可以不断缩减第一个孩子的宽度，以此达到类似演示_3的效果。

演示_4复制代码代码如下：DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN ' ' http://www .w3。org/TR/XHTML 1/DTD/XHTML 1-Transitional。DTD ' html头元http-equiv=' Content-Type ' Content=' text/html；charset=utf-8 '/title/title style type=' text/CSS ' * { margin 3360 0；padd : 0；} ul { list-style :无；} #查看{位置：相对宽度： 320 px高度： 120像素；左边距left:320pxborder: 10px实心# bc8f8f} #视图：after在{ content:'之后；显示器：块；clear:两者；高度： 0;可见性：隐藏；} # img _ list { position :绝对值；宽度： 960 px} #img_list li{左侧浮动：宽度： 320 px高度： 120像素；} # a { background : # 87 ceeb } # b { background : # ff 69 B4；} # c { background : # 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脚本类型=' text/JavaScript ' var img _ list=document。getelementbyid(' img _ list ')；setInterval(function(){ var current=img _ list。子级[0]；for(var I=0；I 100I){(function(pos){ setTimeout(function(){ current。风格。宽度=320-(pos/100)* 320 ' px '；}、(pos 1)* 10)})(I)} setTimeout(function(){ img _ list。appendchild(当前);当前。风格。宽度=' 320像素'；},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-Transitional。DTD ' html头元http-equiv=' Content-Type ' Content=' text/html；charset=utf-8 '/title/title style type=' text/CSS ' * { margin 3360 0；padd : 0；} ul { list-style :无；} #查看{位置：相对宽度： 320 px高度： 120像素；左边距left:320pxborder: 10px实心# bc8f8f} #视图：after在{ content:}之后；显示器：块；clear:两者；高度： 0;可见性：隐藏；} # img _ list { position :绝对值；宽度： 960 px} # img _ list Li {位置：绝对；top :0 left : 0；宽度： 320 px高度： 120像素；} # a { background : # 87 ceeb } # b { background : # ff 69 B4；} # c { background : # 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脚本类型=' text/JavaScript ' var img _ list=document。getelementbyid(' img _ list ')；setInterval(function(){ var current=img _ list。子级[0]；for(var I=0；I 100I){(function(pos){ setTimeout(function(){ current。风格。不透明度=1-(pos/100)* 1；}、(pos 1)* 10)})(I)} setTimeout(function(){ img _ list。appendchild(当前);当前. style。不透明度=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-Transitional。DTD ' html头元http-equiv=' Content-Type ' Content=' text/html；charset=utf-8 '/title/title style type=' text/CSS ' * { margin 3360 0；padd : 0；边框： 0；}车身{ padding: 50px }。sep{ float:左侧；margin 33601 px 1px 0 0 }/style/head body img id=' img ' src=' http :/动画/苹果。jpg ' alt=' '/div id=' wrap ' style=' position : relative；'/div脚本类型=' text/JavaScript ' var img=document。getelementbyid(' img ')；var wrap=文档。getelementbyid(' wrap ')；img。onload=function(){ console。dir(img)；var h=img . natural heightvar w=img . naturalwidewpanel(w，h)；}函数newPanel(w，h){ var cols=10；定义变量行数=10;var ColWidth=数学。楼层(w/cols)；var行高=数学。楼层(w/row)；for(var row=0；行行；row){ for(var col=0；科尔上校；col){ var div=文档。创建元素(' div ')；div。风格。width=colWidth ' pxdiv。风格。高度=行高“px”；div.className=' sepdiv。风格。背景图像=' URL(' img。src ')'；div。风格。背景位置=-colWidth * col ' px '-行高* row ' px包起来。append child(div)；} } } setTimeout(函数(){ setInterval(函数(){包装。最后一次儿童包装。取出儿童(包装。最后一个孩子))；},50) },1000)/脚本/正文/html

演示而已，具体的宽度和排列需要自己再组织下。或者消除，或者遮罩，对应不同的排列组合，其他的方式也比较好实现。最后，大家都懂的，CSS3也可以实现一些幻灯片效果，demo_7:复制代码代码如下：DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 4.01 Transitional//EN ' ' http://www .w3。org/TR/HTML 4/松散。DTD ' HTML头元http-equiv=' Content-Type ' Content=' text/HTML；charset=utf-8 '/title/title style type=' text/CSS ' * { margin 3360 0；padd : 0；} #测试{位置：相对宽度： 300像素；高度： 200像素；飞越：隐藏；border: 1px实心# d4d4d4} #测试ul {位置：绝对值；top :0 left : 0；高度：200 px} #测试ul li{左侧浮动：宽度： 300像素；高度：200 px} @-网络工具包-关键帧我的动画{ 0% { top :0；} 40% { top :-200 px；} 70% { top :-400 px；} 100% { top :-600 px；} } # test ul {-WebKit-animation-name :-网络套件-动画-持续时间：4s-网络套件-动画-定时-函数：线性；-网络套件-动画-迭代-计数：无限；}/style/head body div id=' test ' ul liimg width=' 300 ' height=' 200 ' src=' http :/image/a . jpg ' alt=' '//Li liimg width=' 300 ' height=' 200 ' src=' http :/image/a . jpg ' alt=' '//Li liimg width=' 300 ' height=' 200 ' src=' http :/image/a . jpg ' alt=' '//Li liimg width=' 300 ' height=' 200 ' src=' http :/image/a . jpg ' alt=' '//Li/ul/div/body/html(9504 . 163.com)

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