登录  /  注册
首页 > web前端 > js教程 > 正文
js 幻灯片的实现_javascript技巧
php中文网
发布: 2016-05-16 17:58:43
原创
750人浏览过
摒弃其他的效果,最简单的轮播也就只有一条语句:

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的小点,但是浏览器会爆掉··
demo_6:
复制代码 代码如下:

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














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

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


















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

相关标签:
来源:php中文网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 技术文章
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2023 //m.sbmmt.com/ All Rights Reserved | 苏州跃动光标网络科技有限公司 | 苏ICP备2020058653号-1

 | 本站CDN由 数掘科技 提供

登录PHP中文网,和优秀的人一起学习!
全站2000+教程免费学