// 属性设置
var E_strIFaderTransType = 'reveal'; // 'reveal' | 'blend'
var Filter_number = 23; // 滤镜种数
var change_time = 3.000; // 滤镜转换过程为3.0秒延迟
var wait_time = 5000; // 两种滤镜之间为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 Filt_set() //设置滤镜
{
if(!E_ie4 && !E_nn4) return;
if(E_ie4) {
var theImg = document.all['idImgFading'];
if(theImg == null) return;
with(document.all['idImgFading']) {
style.filter = (E_strIFaderTransType == 'reveal')?'revealTrans':'blendTrans';
style.filter.duration = change_time;
style.filter.transition = Filter_number;
}
}
use_Filter();
obj_Timer = window.setInterval('use_Filter()',wait_time);
}
function use_Filter() //滤镜的启动
{
if(E_ie4) {
with(document.all['idImgFading']) {
if(E_strIFaderTransType == 'reveal') {
filters(0).transition = Filter_number;
}
if(count_temp == (Img_arry.length - 1)) {
count_temp = -1;
}
count_temp++;
title = Img_arry[count_temp].sAlt;
parentElement.href = Img_arry[count_temp].command;
document.all['idImgLink'].innerText=title;
document.all['idImgLink'].href= Img_arry[count_temp].command;
filters(0).apply();
src = Img_arry[count_temp].sImgUrl;
filters(0).play();
}
}
else if(E_nn4) {
if(count_temp == (Img_arry.length - 1)) {
count_temp = -1;
}
count_temp++;
document.images['idImgFading'].src = Img_arry[count_temp].sImgUrl;
}
}
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 == '')?'/':command;
this.sAlt = (sAlt == null)?'':sAlt;
this.sTarget = (sTarget == null || sTarget == '')?'_self':sTarget;
}
Img_arry[0] = new Img_obj('images/ldjy.jpg','DetailsPage.aspx','深入学习实践科学发展观活动动员大会','_self');
Img_arry[1] = new Img_obj('images/q3.jpg','link2.htm','3333333333333','_self');
调用方式:
<center>
<a><img alt="tp" hspace="0" src="images/q2.jpg" width="270" border="0" name="idImgFading" /></a><br/>
<a id="idImgLink"></a>
</center>
<script language="javascript" type="text/javascript">Filt_set();</script>
分享到:
相关推荐
javascript 实现图片轮转效果,效果页面可查看当当品牌店铺
JavaScript图片轮转JavaScript图片轮转JavaScript图片轮转JavaScript图片轮转JavaScript图片轮转JavaScript图片轮转JavaScript图片轮转JavaScript图片轮转JavaScript图片轮转JavaScript图片轮转JavaScript图片轮转
使用html js css技术实现 图片轮转,在移动端图片的滑动效果
运用js+css+html实现图片的轮转
很多网站上多有轮转图片,有的是用flash的,有的是用js的,前几天用了timers这个插件,感觉很不错,就试着写一下轮转图片。 效果还可以,简单明了
用javascript的面向对象的方法写的一个图片轮转效果。里面还有诸多不足之处。
本插件实现了多个横向排列的图片想一个方向滑动的功能,且收尾相接,会有无限滑动且作品很多的感觉,用于作品或者品牌展示
实现轮换图片的js,可实现图片轮换播放,下载后在jsp中调用即可。
jq实现全屏图片轮换效果可以实现全屏焦点图左右滚动切换效果,图片上下自适应。 jq实现全屏图片轮换效果演示图: 点击查看演示
js实现html网页图片轮换效果,左右带有按钮
JavaScript实现图片动态轮转
主要为大家详细介绍了javascript实现循环广告条效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
主要介绍了JS实现的图片自动轮换效果,有具体的实现思路及截图,希望对大家学习有所帮助
例子是使用js实现图片的轮换,就像百度视频新闻首页的几条即时新闻一样,自动轮换,上述文件中包含图片轮换的具体实现(js文件)和一个html测试文件(你也可放在jsp中)
jquery.theatre 多图轮转效果插件,超炫! 可实现3D旋转,2d左右上下自动切换图片,纯JQuery插件,实用! 用了才知道……
jQuery.vitrine.js是一款非常实用的响应式图片轮播旋转展示jQuery插件。该图片轮播插件就像在玻璃橱柜中展示商品一样。用户点击某一张图片之后,图片就会向屏幕中间旋转移动。该插件与旋转木马类似,非常适合用于...
轮番图常用的图片信息展示效果 也是每一个初级前端人员需要学习的效果 实现滑动的原理是:控制同级元素的整体位置 再通过jquery的动作animate 缓慢的实现这一过程 则就会显现滑动效果 下面是菜鸟的代码演示 代码的...
发表评论无刷新,www.sendawangluo.com页面获取评论时显示loading加载效果jquery真的是一个非常优秀的JS库,简单容易掌握,对于网页中的多级菜单、级联效果、Tab选项卡切换、图片轮转显示,实现起来都非常的简单,...
javascript中的缓动效果可以应用于很多地方,比如距离位移上的变化:图片的滚动、焦点图的轮转切换,透明度上的变化:渐隐渐现。凡是存在运动的状态都适用,下面以最基本的块在容器内从左到右滑动为例,讲下几种不同...
使用JQuery实现网页轮播效果 有自动轮转 计算左右的距离 for(var i=0;i;i++){ // 计算左侧的图片位置 lNum=indexId-i-1; $('img').eq(lNum).css({ transform:'translateX('+(-150*(i+1))+'px) translateZ('+(100...