动态实现幻灯片功能（应用filters.revealTrans）

来源：互联网发布：易语言创建mdb数据库编辑：程序博客网时间：2024/05/20 23:59

javascript代码：

//author:安超，日期：2011-2-12 var datas = { "leaderActivity1": ["1.jpg", "图片说明", "http://www.**.org.cn/**/show56.htm"], "leaderActivity2": ["2.jpg", "图片说明", "http://www.**.org.cn/**/show57.htm"], "leaderActivity3": ["3.jpg", "图片说明", "http://www.**.org.cn/**/show58.htm"] }; //动态加载数据 function loadPics() { var pics = document.getElementById("leaderActivities");//获取网页中id为leaderActivities的层，以待往此层内插入数据 for (var key in datas) { var div = document.createElement("<div id='' onMouseOver='isScroll(1)' style='visibility: hidden; position:absolute;filter: revealTrans(transition=23,duration=2);' onMouseOut='isScroll(0)'></div>"); div.id = key; div.style.width = "258px"; div.style.height = "201px"; pics.appendChild(div); var links = document.createElement("<a href='' target='_blank'></a>"); links.href = datas[key][2]; div.appendChild(links); var img = document.createElement("<img border='0' />"); img.src = datas[key][0]; img.width = "258"; img.height = "166"; links.appendChild(img); var paragm = document.createElement("<p></p>"); paragm.innerHTML = "<a href=" + datas[key][2] + " target='_blank'>" + "<b>" + datas[key][1] + "</b>" + "</a>"; div.appendChild(paragm); } } //设置是否滚动，0为滚动，1为不滚动 var scoll = 0; //控制滚动的函数即控制scoll function isScroll(v) { scoll = v; } //设置计数器，1显示层1，2显示层2…… var counter = 1; //显示层的函数 function showit(a,b) {//a为要显示的层，b为其是否显示的参数，1显示此层，其它则不显示 if (a == null) {//图层没有加载时不进行判断 return; } a.filters.revealTrans.apply(); //对图层应用滤镜 if (b == 1) {//显示该层 a.style.visibility = "visible"; } else { a.style.visibility = "hidden"; } a.filters.revealTrans.play(); //每个层都播放此滤镜，进入和退出都应用 } //设置图层等待时间，这里存在一个自身调用的死循环 function setTime() { var leaderActivity1 = document.getElementById("leaderActivity1"); var leaderActivity2 = document.getElementById("leaderActivity2"); var leaderActivity3 = document.getElementById("leaderActivity3"); if (scoll == 0) {//默认滤镜滚动的情况下 if (counter == 1) {//显示图层1 counter++; //增1在下一次触发此函数时控制显示图层2 showit(leaderActivity1, 1); showit(leaderActivity2, 0); showit(leaderActivity3, 0); setTimeout("setTime()", 5000); //生成一个调用自身的死循环，从而生成一个等待5秒的效果 } else if (counter == 2) {//显示图层2 counter++; //增1在下一次触发此函数时控制显示图层3 showit(leaderActivity1, 0); showit(leaderActivity2, 1); showit(leaderActivity3, 0); setTimeout("setTime()", 5000); //生成一个调用自身的死循环，从而生成一个等待5秒的效果 } else {//显示图层3 counter=1; //重置为1在下一次触发此函数时控制显示图层1 showit(leaderActivity1, 0); showit(leaderActivity2, 0); showit(leaderActivity3, 1); setTimeout("setTime()", 5000); //生成一个调用自身的死循环，从而生成一个等待5秒的效果 } } else { setTimeout("setTime()", 5000);//生成一个调用自身的死循环，从而生成一个等待5秒的效果 } } setTimeout("loadPics()", 1000); setTimeout("setTime()", 3000);

setTime函数也可以利用节点来实现：