JS图片滤镜焦点图片自动切换显示效果丨芯晴网页特效

最新推荐文章于 2017-12-13 23:25:00 发布

t115872285

最新推荐文章于 2017-12-13 23:25:00 发布

阅读量1.1k

点赞数 1

CC 4.0 BY-SA版权

文章标签： filter command function null timer blend

本文链接：https://blog.youkuaiyun.com/t115872285/article/details/6293053

本文介绍了一种使用JavaScript实现的图片滤镜焦点图自动切换效果。该效果通过设置不同的滤镜类型实现图片间的平滑过渡，并可在指定的时间间隔内自动更换图片。

<HTML>
<HEAD>
<TITLE>JS图片滤镜焦点图片自动切换显示效果丨芯晴网页特效丨CsrCode.Cn</TITLE>
<style>
.30pt{color:#ce288c;font-size:30pt}
</style>
<SCRIPT language=JavaScript>
// 属性设置
var E_strIFaderTransType     = 'reveal'; // 'reveal' | 'blend'
var Filter_number    = 23;       // 滤镜种数
var change_time = 1.000;    // 滤镜转换过程为3.0秒延迟
var wait_time    = 3000;     // 两种滤镜之间为5秒延迟

var obj_Timer;
var count_temp = 0; //记录当前是第几幅图片
var Img_arry = new Array(); //图片数组
var E_ie4 = document.all?true:false;
var E_nn4 = document.layers?true:false;

function obj_ClearTime() {
window.clearInterval(obj_Timer);
}
window.onunload = obj_ClearTime;//取消计时器，释放系统资源

function Img_obj(sImgUrl,command,sAlt,sTarget)
{
this.sImgUrl = (sImgUrl == null)?'':sImgUrl;
this.command = (command == null || command == '')?'http://www.china.com':command;
this.sAlt = (sAlt == null)?'':sAlt;
this.sTarget = (sTarget == null || sTarget == '')?'_self':sTarget;
}
</SCRIPT>

<SCRIPT language=JavaScript>

</SCRIPT>
</HEAD>
<BODY >
<font class=30pt>
<center>JS图片滤镜自己转换效果，焦点图切换</center>
</font>
<br><br><br>
<center>
<A href="#">
<IMG hspace=0 src="http://www.CsrCode.cn/images/m01.jpg" width=400 height=300 border=0 name=idImgFading>
</A>
</center>
<SCRIPT language=JavaScript>Filt_set();</SCRIPT>
</BODY>
</HTML>