html 幻灯片 ppt 效果代码 for ie only

来源：互联网发布：wifi广告营销系统源码编辑：程序博客网时间：2024/05/22 01:26
<html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><meta http-equiv="Keywords" content="ppt;javascript;css;web design;dom">  <meta http-equiv="Auther" content="barenx@163.com"> <title>图片浏览</title><style type="text/css">/*Copyright(C) 2007-2008. BAREN Productions. All rights reserved.*/BODY {width:100%;height:100%;overflow:hidden;background-color:#273842;background-image:url(img/bg2.gif);background-repeat:repeat-x;}.MainTable{width:100%;height:100%;border:none;text-align:center;vertical-align:middle;}.InfoTD{color:#eeeeee;font-size:12px;width:100%;height:40px;border:none;display:table-cell;}.InfoTD a{color:#eeeeee;}.InfoTD nobr{padding-left:5px;padding-right:5px;}.InfoTD span{padding-left:10px;padding-right:10px;}.MainTD{width:100%;height:auto;border:none;display:table-cell;text-align:center;vertical-align:middle;}.MainDiv{width:90%;height:95%;left:5%;top:5%;display:block;position:absolute;}#ImgDiv{width:100%;height:100%;vertical-align:middle;overflow:hidden;display:block;position:relative;z-index:0;border:none;}#ImgDiv img{width:auto;height:auto;display:block;position:absolute;vertical-align:middle;padding-top:10px;}#ImgDiv #imgShow{z-index:1;visibility:hidden;border:3px solid #cccccc;}#ImgDiv #imgBuffer{z-index:-1;visibility:hidden;}#ConDiv{width:100%;height:42px;left:0px;bottom:7%;text-align:center;display:block;position:absolute;overflow:hidden;z-index:3;}#iControl{top:0px;position:relative;height:100%;width:348px;visibility:visible;background:url(img/control.gif) no-repeat;filter:progid:DXImageTransform.Microsoft.Alpha(opacity=75);}#iControl a, #iControl *{display:table-cell;position:absolute;width:30px;height:42px;overflow:hidden;border:none;}.iPre{left:24px;background:url(img/contro_bar.gif) 0px 0px no-repeat;}.iPre:hover{background:url(img/contro_bar.gif) 0px -42px no-repeat;}.iPlay{left:159px;background:url(img/contro_bar.gif) -30px 0px no-repeat;}.iPlay:hover{background:url(img/contro_bar.gif) -30px -42px no-repeat;}.iPause{left:159px;background:url(img/contro_bar.gif) -60px 0px no-repeat;}.iPause:hover{background:url(img/contro_bar.gif) -60px -42px no-repeat;}.iNext{right:24px;background:url(img/contro_bar.gif) -90px 0px no-repeat;}.iNext:hover{background:url(img/contro_bar.gif) -90px -42px no-repeat;}.logoImg{float:right;}</style><script language="javascript" type="text/javascript">//Copyright(C) 2007-2008. BAREN Productions. All rights reserved.ImgView={autoFix:function(O){O.style.visibility="hidden";O.style.width="auto";O.style.height="auto";var pW=O.parentNode.clientWidth-10;var pH=O.parentNode.clientHeight-10;var oW=O.clientWidthvar oH=O.clientHeight;if (oW>pW || oH>pH){if (oW/oH>pW/pH){O.style.width=pW;oH=oH/oW*pW;oW=pW;O.height="auto";}else{O.style.height=pH;oW=oW/oH*pH;oH=pH;O.style.width="auto";}}O.style.left=(pW-oW)/2;O.style.top=(pH-oH)/2;ImgFilter.doFilter(this.Viewer,O)//O.style.visibility="visible";},_Play:function(){if(ImgBuffer.move(1)){ImgView.ShowImg.src=ImgBuffer.getRel(0);ImgView.BuferImg.src=ImgBuffer.getRel(1);ImgBuffer.updateInfo();ImgView.Timer=setTimeout(ImgView._Play,2750);}else ImgView._doStop();},_doPlay:function(){clearTimeout(this.Timer);this._Play();this.btPlay.className="iPause";this.status=0;},_doStop:function(){clearTimeout(this.Timer);this.btPlay.className="iPlay";this.status=1},doPlay:function(){if(this.status) this._doPlay();else this._doStop();},doNext:function(n){this._doStop();if(ImgBuffer.move(n)){this.ShowImg.src=ImgBuffer.getRel(0);this.BuferImg.src=ImgBuffer.getRel(1);ImgBuffer.updateInfo();return true;}else return false;//document.title=ImgBuffer.pointer;},Init:function(){this.ShowImg=document.getElementById('imgShow');this.BuferImg=document.getElementById('imgBuffer');this.Viewer=document.getElementById('ImgDiv');this.btPlay=document.getElementById('bPlay');this.status=1;this.Timer=0;this.ShowImg.onload=window.onresize=function(){ImgView.autoFix(ImgView.ShowImg)}this.doNext(1);}};ImgFilter={Filters:["progid:DXImageTransform.Microsoft.Barn()","BlendTrans()","progid:DXImageTransform.Microsoft.Blinds()","progid:DXImageTransform.Microsoft.CheckerBoard()","progid:DXImageTransform.Microsoft.Fade()","progid:DXImageTransform.Microsoft.GradientWipe()","progid:DXImageTransform.Microsoft.Inset()","progid:DXImageTransform.Microsoft.Iris()","progid:DXImageTransform.Microsoft.Pixelate()","progid:DXImageTransform.Microsoft.RadialWipe()","progid:DXImageTransform.Microsoft.RandomBars()","progid:DXImageTransform.Microsoft.RandomDissolve()","progid:DXImageTransform.Microsoft.RevealTrans(transition=23)","progid:DXImageTransform.Microsoft.Slide()","progid:DXImageTransform.Microsoft.Spiral()","progid:DXImageTransform.Microsoft.Stretch()","progid:DXImageTransform.Microsoft.Strips()","progid:DXImageTransform.Microsoft.Wheel()","progid:DXImageTransform.Microsoft.Zigzag()"],getInstance:function(){return this.Filters[Math.floor(Math.random()*0xFFFFFF) % this.Filters.length];},doFilter:function(F,O){F.style.filter=this.getInstance();F.filters[0].Apply();O.style.visibility="visible";F.filters[0].play();}};ControlBar={DivTimeout:0,MouseTimout:0,status:1,obj:null,objf:null,_fadeIn:function(){if(ControlBar.objf.Opacity<75){ControlBar.objf.Opacity+=5;ControlBar.DivTimeout=setTimeout(ControlBar._fadeIn,5);}else{ControlBar.status=1;}},_fadeOut:function(){if(ControlBar.objf.Opacity>10){ControlBar.objf.Opacity-=5;ControlBar.DivTimeout=setTimeout(ControlBar._fadeOut,5);}else {ControlBar.obj.style.visibility="hidden";ControlBar.status=0;}},fadeIn:function(){if(ControlBar.status==1)return;ControlBar.obj.style.visibility="visible";clearTimeout(ControlBar.DivTimeout);ControlBar._fadeIn();},fadeOut:function(){clearTimeout(ControlBar.DivTimeout);if (ControlBar.Inbox) return;ControlBar._fadeOut();},onMove:function(){if (ControlBar.obj.currentStyle.visibility=="visible"){clearTimeout(ControlBar.MouseTimout);ControlBar.MouseTimout=setTimeout(ControlBar.fadeOut,2200);}else ControlBar.fadeIn();},Init:function(){this.obj=document.getElementById('iControl');this.objf=this.obj.filters[0];this.obj.onmouseenter=function(){ControlBar.Inbox=true;ControlBar.objf.Opacity=88}this.obj.onmouseout=function(){ControlBar.objf.Opacity=75;ControlBar.Inbox=false;}document.onmousemove=this.onMove;}}//修改imgbuffer的代码使得可以动态获取缓冲区里面的数据//demo程序的buffer是静态的,应用中更换成ajax请求ImgBuffer={buffer:[],infomation:[],pointer:-1,//移动缓冲区指针move:function(v){var t=this.pointer+v;if(t>=0 && t<this.buffer.length) {this.pointer=t;return true;}return false;},//获得指针相对位置的数据getRel:function(v){return this.buffer[this.pointer+v];},//获得获得缓冲区绝对位置的数据(未使用)getAbs:function(v){return this.buffer[v];},//请重载此函数!功能:获得当前图片的信息getCurInfo:function(){//return null;return this.infomation[this.pointer];},//更新图片信息updateInfo:function(){var o=this.getCurInfo()if(o){this.iTitle.innerHTML=o;}},//初始化缓冲区数据Init:function(){this.iTitle=document.getElementById('iTitle');var txt=document.getElementById('InfoBufferText').innerHTML;txt=txt.split('\r\n');for(var i=0;i<txt.length;i++){var it=txt[i].split('\t');this.buffer.push("pic/"+it[0]);this.infomation.push(it[1]);}}};function Init(){document.oncontextmenu=function(){return false}ImgBuffer.Init();ImgView.Init();ControlBar.Init();}</script></head><body onLoad="Init()"><table class="MainTable"><tr><td class="MainTD">        <div  class="MainDiv">            <div id="ImgDiv">                <img id="imgShow"/>                <img id="imgBuffer"/>            </div>            <div id="ConDiv">                <span id="iControl">                    <a class="iPre" onFocus="this.blur()" href="#" onClick="ImgView.doNext(-1)"></a>                    <a class="iPlay" onFocus="this.blur()" href="#" onClick="ImgView.doPlay()" id=bPlay></a>                    <a class="iNext" onFocus="this.blur()" href="#" onClick="ImgView.doNext(1)"></a>                </span>            </div>        </div>    </td></tr>    <tr><td class="InfoTD">    <span id=iTitle></span>    </td></tr></table><embed src="bg.mp3" autostart="true" hidden="true" loop="true"></embed> <textarea id=InfoBufferText style="display:none">0.jpg0.99906836764137041.jpg0.49153942982103442.jpg0.24472505461984053.jpg0.95131718528529314.jpg0.090783046694669415.jpg0.16938010150375216.jpg0.4603445576409237.jpg0.85443396882065588.jpg0.088890339851855859.jpg0.1071509639314532910.jpg0.825608111592372811.jpg0.692904472578600912.jpg0.87607879804092713.jpg0.251807861074498414.jpg0.928489123748688315.jpg0.825040704024781616.jpg0.655026899150878117.jpg0.462146693719763818.jpg0.971217629495059819.jpg0.4603830415670644420.jpg0.1813715470389151121.jpg0.3073009869184618622.jpg0.20385076538676366</textarea></body></html>
同级目录放img/文件夹css所用图片， pic 放ppt图片配置说明写在textarea里面，改下ajax加载也可以
img/文件夹