首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

js 幻灯片的实现

Posted in Javascript onDecember 06, 2011

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

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

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

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

demo_1： 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 
<title></title> 
<style type="text/css"> 
*{ margin: 0; padding: 0;} 
ul{ list-style: none;} 
#view{ position: relative; width: 320px; height: 120px; margin-left:320px; border: 10px solid #bc8f8f; } 
#view:after{ content: '.'; display: block; clear: both; height: 0; visibility:hidden;} 
#img_list{ position: absolute; width: 960px;} 
#img_list li{ float: left; width: 320px; height: 120px; } 
#a{ background: #87ceeb;} 
#b{ background: #ff69b4;} 
#c{ background: #98fb98;} 
</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.firstChild); 
},500) 
</script> 
</body> 
</html>

js 幻灯片的实现

（上面的demo其实可以不用浮动，仅为了后面的演示）
另一种方式就是不改变节点顺序，把整个列表向某个方向移动（不断改变列表的left属性），
demo_2： 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 
<title></title> 
<style type="text/css"> 
*{ margin: 0; padding: 0;} 
ul{ list-style: none;} 
#view{ position: relative; width: 320px; height: 120px; margin-left:320px; border: 10px solid #bc8f8f; } 
#view:after{ content: '.'; display: block; clear: both; height: 0; visibility:hidden;} 
#img_list{ position: absolute; width: 960px;} 
#img_list li{ float: left; width: 320px; height: 120px; } 
#a{ background: #87ceeb;} 
#b{ background: #ff69b4;} 
#c{ background: #98fb98;} 
</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.style.left = 0; 
setInterval(function(){ 
img_list.style.left = parseInt(img_list.style.left) == -640 ? 0: (parseInt(img_list.style.left) - 320 + 'px'); 
},500) 
</script> 
</body> 
</html>

上面的demo突兀，感觉不好，于是可以加上平滑的移动效果。
所谓平滑的移动效果其实就是把上面第二个demo的每一大步分解为若干个小的部分，把一次移动320px分成50次来执行；
demo_3： 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 
<title></title> 
<style type="text/css"> 
*{ margin: 0; padding: 0;} 
ul{ list-style: none;} 
#view{ position: relative; width: 320px; height: 120px; margin-left:320px; border: 10px solid #bc8f8f; } 
#view:after{ content: '.'; display: block; clear: both; height: 0; visibility:hidden;} 
#img_list{ position: absolute; width: 960px;} 
#img_list li{ float: left; width: 320px; height: 120px; } 
#a{ background: #87ceeb;} 
#b{ background: #ff69b4;} 
#c{ background: #98fb98;} 
</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.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) == -640 ? 0: -pos/100 * 640+'px'; 
},(pos + 1)*10) 
})(i) 
} 
},1500) 
</script> 
</body> 
</html>

对于demo_1的情况，我们可以不断缩减firstChild的宽度，以此达到类似demo_3的效果。
demo_4 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 
<title></title> 
<style type="text/css"> 
*{ margin: 0; padding: 0;} 
ul{ list-style: none;} 
#view{ position: relative; width: 320px; height: 120px; margin-left:320px; border: 10px solid #bc8f8f; } 
#view:after{ content: '.'; display: block; clear: both; height: 0; visibility:hidden;} 
#img_list{ position: absolute; width: 960px;} 
#img_list li{ float: left; width: 320px; height: 120px; } 
#a{ background: #87ceeb;} 
#b{ background: #ff69b4;} 
#c{ background: #98fb98;} 
</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.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) 
</script> 
</body> 
</html>

上面几种，方式原理都差不多，另外还可以设置透明渐变，让一张图片透明度从1国度到0 ，于是也可以产生切换效果，代码改动也很小。
demo_5： 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 
<title></title> 
<style type="text/css"> 
*{ margin: 0; padding: 0;} 
ul{ list-style: none;} 
#view{ position: relative; width: 320px; height: 120px; margin-left:320px; border: 10px solid #bc8f8f; } 
#view:after{ content: '.'; display: block; clear: both; height: 0; visibility:hidden;} 
#img_list{ position: absolute; width: 960px;} 
#img_list li{position: absolute; top:0; left: 0; width: 320px; height: 120px; } 
#a{ background: #87ceeb;} 
#b{ background: #ff69b4;} 
#c{ background: #98fb98;} 
</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.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) 
</script> 
</body> 
</html>

至于其他各种绚丽的效果，经过一些其他的组合处理就可以了。
一种处理方法就是把图片分割成n个区域，将背景都设置为需要显示的图片，然后在不同的区域显示对应的背景。这样一来，一张100*100的图片，可以被分割成100个10*10的小方块，再对这些方块来进行处理，得到的效果就会更多。理论上还可以分成10000个1*1的小点，但是浏览器会爆掉··
demo_6： 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 
<title></title> 
<style type="text/css"> 
*{ margin: 0; padding: 0; border: 0;} 
body{ padding: 50px;} 
.sep{ float: left; margin:1px 1px 0 0;} 
</style> 
</head> 
<body> 
<img id="img" src="../动画/apple.jpg" alt="" /> 
<div id="wrap" style="position: relative; "></div> 
<script type="text/javascript"> 
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) 
</script> 
</body> 
</html>

js 幻灯片的实现

js 幻灯片的实现

js 幻灯片的实现

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 
<title></title> 
<style type="text/css"> 
*{ 
margin: 0; 
padding: 0; 
} 
#test{ 
position: relative; 
width: 300px; 
height: 200px; 
overflow: hidden; 
border: 1px solid #d4d4d4; 
} 
#test ul{ 
position: absolute; 
top:0; 
left: 0; 
height:200px; 
} 
#test ul li{ 
float: left; 
width: 300px; 
height:200px; 
} 
@-webkit-keyframes myAnimation{ 
0%{ 
top:0; 
} 
40%{ 
top:-200px; 
} 
70%{ 
top:-400px; 
} 
100%{ 
top:-600px; 
} 
} 
#test ul{ 
-webkit-animation-name:myAnimation; 
-webkit-animation-duration:4s; 
-webkit-animation-timing-function:linear; 
-webkit-animation-iteration-count:infinite; 
} 
</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>

js 幻灯片的实现

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

js 幻灯片的实现

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
js 全兼容可高亮二级缓冲折叠菜单
Jun 04 Javascript
Jquery实现兼容各大浏览器的Enter回车切换输入焦点的方法
Sep 01 Javascript
node.js使用require()函数加载模块
Nov 26 Javascript
把Node.js程序加入服务实现随机启动
Jun 25 Javascript
Javascript 实现简单计算器实例代码
Oct 23 Javascript
JS IOS/iPhone的Safari浏览器不兼容Javascript中的Date()问题如何解决
Nov 11 Javascript
Ionic+AngularJS实现登录和注册带验证功能
Feb 09 Javascript
bootstrap模态框示例代码分享
May 17 Javascript
VUE前端cookie简单操作
Oct 17 Javascript
浅谈js闭包理解
Apr 01 Javascript
vue2.0自定义指令示例代码详解
Apr 25 Javascript
在vue项目中promise解决回调地狱和并发请求的问题
Nov 09 Javascript
字符串的replace方法应用浅析
Dec 06 #Javascript
js滚动条回到顶部的代码
Dec 06 #Javascript
javascript检测浏览器flash版本的实现代码
Dec 06 #Javascript
javascript 随机展示头像实现代码
Dec 06 #Javascript
jQuery中需要注意的细节问题小结
Dec 06 #Javascript
jQuery load方法用法集锦
Dec 06 #Javascript
基于JQuery实现的类似购物商城的购物车
Dec 06 #Javascript
SONY(15) 电路图(1) 天线(6) ICF-7600(1) TOSHIBA(1) 东芝(1) PL-880(1) 索尼(5) 短波(1) 德劲(5)
You might like
PHP配置文件中最常用四个ini函数
2007/03/19 PHP
PHP 开发环境配置（Zend Server安装）
2010/04/28 PHP
php stream_get_meta_data返回值
2013/09/29 PHP
PHP set_error_handler()函数使用详解（示例）
2013/11/12 PHP
PHP实现腾讯短网址生成api接口实例
2020/12/08 PHP
jquery+json实现的搜索加分页效果
2010/03/31 Javascript
JavaScript之引用类型介绍
2012/08/10 Javascript
node.js中格式化数字增加千位符的几种方法
2015/07/03 Javascript
jQuery EasyUI实现右键菜单变灰不可用效果
2015/09/24 Javascript
jQuery mobile类库使用时加载导航历史的方法简介
2015/12/04 Javascript
原生js页面滚动延迟加载图片
2015/12/20 Javascript
jquery自定义插件结合baiduTemplate.js实现异步刷新（附源码）
2016/12/22 Javascript
jQuery实现html table行Tr的复制、删除、计算功能
2017/07/10 jQuery
vue 弹窗时 监听手机返回键关闭弹窗功能(页面不跳转)
2019/05/10 Javascript
通过Nodejs搭建网站简单实现注册登录流程
2019/06/14 NodeJs
在VUE style中使用data中的变量的方法
2020/06/19 Javascript
原生JS实现相邻月份日历
2020/10/13 Javascript
[01:15:18]2014 DOTA2国际邀请赛中国区预选赛 LGD VS Speed Gaming.cn
2014/05/22 DOTA
[01:52]2020年DOTA2 TI10夏季活动预告片
2020/07/15 DOTA
Python实现将xml导入至excel
2015/11/20 Python
Flask之flask-script模块使用
2018/07/26 Python
Python File(文件) 方法整理
2019/02/18 Python
使用Python控制摄像头拍照并发邮件
2019/04/23 Python
Django 设置多环境配置文件载入问题
2020/02/25 Python
python speech模块的使用方法
2020/09/09 Python
英国剑桥包中文官网：The Cambridge Satchel Company中国
2018/11/06 全球购物
就业推荐表自我鉴定
2013/10/29 职场文书
自荐信格式简述
2014/01/25 职场文书
计算机专业毕业生自荐信范文
2014/03/06 职场文书
学习决心书
2014/03/11 职场文书
毕业生就业意向书
2014/04/01 职场文书
目标责任书格式范文
2015/05/11 职场文书
校园歌手大赛主持词
2015/07/03 职场文书
2015年秋季灭鼠工作总结
2015/07/27 职场文书
Python实现Hash算法
2022/03/18 Python
Docker容器harbor私有仓库部署和管理
2022/08/05 Servers