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

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

Javascript 相关文章推荐
Javascript模板技术
Apr 27 Javascript
Dom在ajax技术中的作用说明
Oct 25 Javascript
jQuery 源码分析笔记(4) Ready函数
Jun 02 Javascript
JavaScript创建对象的写法
Aug 29 Javascript
nodeType属性返回被选节点的节点类型介绍
Nov 22 Javascript
在每个匹配元素的外部插入新元素的方法
Dec 20 Javascript
jquery实现增加删除行的方法
Feb 03 Javascript
JavaScript动态添加style节点的方法
Jun 09 Javascript
提升jQuery的性能需要做好七件事
Jan 11 Javascript
Angular2进阶之如何避免Dom误区
Apr 02 Javascript
详解element-ui级联菜单(城市三级联动菜单)和回显问题
Oct 02 Javascript
浅谈js中的attributes和Attribute的用法与区别
Jul 16 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
You might like
整合了前面的PHP数据库连接类~~做成一个分页类!
2006/11/25 PHP
PHP实现基于文本的摩斯电码生成器
2016/01/11 PHP
Yii2针对指定url的生成及图片等的引入方法小结
2016/07/18 PHP
php基于环形链表解决约瑟夫环问题示例
2017/11/07 PHP
javascript onkeydown,onkeyup,onkeypress,onclick,ondblclick
2009/02/04 Javascript
js简单实现图片延迟加载的方法
2016/07/19 Javascript
原生Javascript和jQuery做轮播图简单例子
2016/10/11 Javascript
JS表单数据验证的正则表达式(常用)
2017/02/18 Javascript
Bootstrap显示与隐藏简单实现代码
2017/03/06 Javascript
判断jQuery是否加载完成,没完成继续判断的解决方法
2017/12/06 jQuery
vue 项目中使用Loading组件的示例代码
2018/08/31 Javascript
浅谈JS的原型和继承
2019/05/08 Javascript
小程序实现搜索框功能
2020/03/26 Javascript
vue中通过使用$attrs实现组件之间的数据传递功能
2019/09/01 Javascript
[02:24]DOTA2痛苦女王 英雄基础教程
2013/11/26 DOTA
Python对象体系深入分析
2014/10/28 Python
Python StringIO模块实现在内存缓冲区中读写数据
2015/04/08 Python
Python自定义线程池实现方法分析
2018/02/07 Python
对python .txt文件读取及数据处理方法总结
2018/04/23 Python
Python 忽略warning的输出方法
2018/10/18 Python
Python2 Selenium元素定位的实现(8种)
2019/02/25 Python
用python做游戏的细节详解
2019/06/25 Python
python 利用matplotlib在3D空间中绘制平面的案例
2021/02/06 Python
html5实现的便签特效(实战分享)
2013/11/29 HTML / CSS
全球领先的鞋类零售商:The Walking Company
2016/07/21 全球购物
Coach澳大利亚官方网站:美国著名时尚奢侈品牌
2017/05/24 全球购物
伦敦所有西区剧院演出官方票务代理:Theatre Tickets Direct
2017/05/26 全球购物
加拿大服装和鞋类零售商:Mark’s
2021/01/04 全球购物
毕业生自我鉴定
2013/11/05 职场文书
总经理的岗位职责
2014/02/23 职场文书
小学三年级学生评语
2014/04/22 职场文书
协议书范本
2014/04/23 职场文书
公司经理任命书
2014/06/05 职场文书
2014年学校工作总结
2014/11/20 职场文书
担保书范本
2015/01/20 职场文书
2015年实习生工作总结报告
2015/04/28 职场文书