CSS Filter 过滤器 +JS 实现 幻灯片播放
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta http-equiv="x-ua-compatible" content="ie=7,ie6" />
<link href="style.css" rel="stylesheet" type="text/css" />
<style type="text/css">
.lstyle
{
font-size: 14px;
font-weight: bold;
color: #004986; /*#996633;*/
float: left;
}
.rstyle
{
font-size: 14px;
font-weight: bold;
color: #004986; /*#0066FF;*/
float: left;
}
</style>
<style type="text/css">
.cutLen
{
width: 170px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
float: left;
}
</style>
<script type="text/javascript">
function LoadAll() {
//getNewsPhoto(5, 3, "../Articles/ArticlesUtil.aspx", "photolists");
}
</script>
</head>
<body onload="LoadAll();">
<!--首页中-->
<div >
<!--主新闻区域-->
<div class="c-center">
<!--头条新闻-->
<!--教育新闻开始-->
<div class="ibox">
<div class="ibox3-top">
<div class="ibox3-top1">
<div class="ibox3-top2-t1 font14 font3">
图片新闻</div>
<a href="../Articles/CheckArticles.aspx?flag=3" >>>更多</a>
</div>
</div>
<!--第一层新闻开始-->
<div class="iboxcon ibox1-con h25">
<!--图片幻灯-->
<div class="box-pc-news1">
<div >
<div >
<div >
<div>
<a >
<img margin-left: border: 0px solid #000000;
filter: progid:DXImageTransform.Microsoft.RevealTrans (duration=2,transition=23);" /></a>
</div>
<div style="filter: alpha(style=0,opacity=60,finishOpacity=90); text-align: right;
top: -25px; position: relative; margin: 0px; height: 20px; border: 0px; padding-top: 1px;
z-index: 4000;">
<div >
</div>
</div>
</div>
</div>
<div >
</div>
</div>
<div >
<a ></a>
</div>
<script language="JavaScript" type="text/javascript">
function getObject(o) {
if (!getObject) { return null; };
o = (typeof o == 'string') ? document.getElementById(o) : o;
return o;
}
if (typeof photolist != 'function') {
var photolist = function() {
var a;
var img;
var title;
}
}
/*处理数组*/
var plist = getObject("photolists");
plist.style.display = 'none';
var Photos = new Array();
var Num = 0;
if (plist) {
var n = plist.getElementsByTagName("p");
for (var i = 0; i < n.length; i++) {
var p = new photolist();
p.a = n[i].getElementsByTagName("A")[0];
p.img = n[i].getElementsByTagName("IMG")[0];
p.title = p.a.innerHTML;
if (p.a && p.img && p.title) {
Photos[Num] = p; Num++;
}
}
var focus_photo_nav = getObject("focus_photo_nav");
for (var i = 1; i < Photos.length + 1; i++) {
var y = document.createElement("a");
y.appendChild(document.createTextNode(i));
y.id = "xxjdjj" + i;
y.className = "axx";
y.target = "_self";
y.href = "javascript:changeimg(" + i + ");";
focus_photo_nav.appendChild(y);
}
}
/*处理数组结束*/
var nn = 1; //当前所显示的滚动图
var key = 0; //标识是否为第一次开始执行
var tt; //标识作用
function change_img() {
if (key == 0) { key = 1; } //如果第一次执行KEY=1，表示已经执行过一次了。
else if (document.all)//document.all仅IE6/7认识，firefox不会执行此段内容
{
getObject("focus_photo_pic").filters[0].Apply(); //将滤镜应用到对像上
getObject("focus_photo_pic").filters[0].Play(duration = 2); //开始转换
getObject("focus_photo_pic").filters[0].Transition = 23; //转换效果
}
try {
getObject("focus_photo_pic").src = Photos[nn - 1].img.src; //替换图片
getObject("focus_photo_url").href = Photos[nn - 1].a.href; //替换URL
getObject("focus_title_url").href = Photos[nn - 1].a.href; //替换URL
getObject("focus_title_url").innerHTML = Photos[nn - 1].title; //替换title
for (var i = 1; i <= Num; i++) {
getObject("xxjdjj" + i).className = 'axx'; //将下面黑条上的所有链接变为未选中状态
}
getObject("xxjdjj" + nn).className = 'bxx'; //将当前页面的ID设置为选中状态
nn++;
if (nn > Num) { nn = 1; } //如果ID大于总图片数量。则从头开始循环
}
catch (err) {
//alert(err);
}
tt = setTimeout('change_img()', 7000); //在4秒后重新执行change_img()方法.
}
function changeimg(n)//点击黑条上的链接执行的方法
{
nn = n; //当前页面的ID等于传入的N值,
window.clearInterval(tt); //清除用于循环的TTn
//重新执行change_img();但change_img()内所调用的图片ID已经在此处被修改,会从新ID处开始执行.
change_img();
}
//开始执行滚动操作
change_img();
</script>
</div>
<!--图片幻灯结束-->
<div class="box-con-news10">
<!--新闻板块1-->
<ul >
<div>
<ul >
</ul>
</div>
</ul>
</div>
<div class="clear">
</div>
</div>
</body>
</html>
渐层
filter : progid:DXImageTransform.Microsoft.RevealTrans ( enabled=bEnabled , duration=fDuration , transition=iTransitionType )
属性：
| enabled | : | 可选项。布尔值(Boolean)。设置或检索滤镜是否激活。true | false
| ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| duration | : | 可选项。浮点数(Real)。设置或检索转换完成所用的时间。其值为秒.毫秒(0.0000)格式。
你可以使用 play 方法的 iDuration 参数设置转换回放的持续时间。然而，当你一旦调用了 play 方法，在回放持续过程中 Duration 特性就变为只读特性。 | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| transition | : | 可选项。整数值(Integer)。设置或检索转换所使用的方式。
|
特性：
| Enabled | : | 可读写。布尔值(Boolean)。参阅 enabled 属性。 | |||||||||
| Duration | : | 可读写。浮点数(Real)。参阅 duration 属性。 | |||||||||
| Transition | : | 可读写。整数值(Integer)。参阅 transition 属性。 | |||||||||
| Percent | : | 可读写。字符串(String)。设置或检索当前静态滤镜输出在转换进程中所处的点。取值范围为 0 - 100 。默认值为 0 ，转换尚未开始。 100 为转换完成。
此特性可用于使用转换滤镜建立静态滤镜效果。设置其值等于定义了转换进程停止的点。使用转换滤镜建立静态滤镜效果可遵循以下步骤：
| |||||||||
| status | : | 只读。整数值(Integer)。检索转换的当前状态。0 | 1 | 2
|
方法：
| apply | : | 捕获对象内容的初始显示，为转换做必要的准备。无返回值。
当此方法一旦被调用后，对象属性的任何改变都不会被显示，直到你调用 play 方法开始转换。 请注意：你只能使用 visibility 属性来改变对象的子对象。否则，对子对象的直接改变会被立即显示出来，而不会被转换滤镜捕获。 当你调用 play 方法时，转换呈现出内容的变化结果(对象的属性和子对象的 visibility 属性的改变)。 | |||
| play ( iDuration ) | : | 开始转换。无返回值。参数见下表。
| |||
| stop | : | 停止转换回放。并呈现转换结果图像。同时激发 onfilterchange 事件。无返回值。 |
说明：
提供了24种转换对象内容的效果。
示例：
#idDiv{ height:250px; width:250px; background-color: gold; filter:progid:DXImageTransform.Microsoft.RevealTrans(duration=5, transition=2); }
