html 幻灯片 ppt 效果代码 for ie only_html幻灯片效果代码-优快云博客

本文链接：https://blog.youkuaiyun.com/barenx/article/details/8581158

本文介绍了如何使用HTML和JavaScript创建幻灯片展示效果，特别强调了对IE浏览器的兼容性处理。内容包括将图片资源存放在img/文件夹中，CSS样式用于美化，幻灯片图片则放在pic文件夹内。此外，还提及配置说明可以通过textarea进行编辑，同时也提到了通过修改ajax加载方式来实现动态更新。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<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