`

js实现轮转图片

阅读更多

// 属性设置
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图片轮转JavaScript图片轮转JavaScript图片轮转

    html实现图片轮转

    使用html js css技术实现 图片轮转,在移动端图片的滑动效果

    用js实现图片轮转

    运用js+css+html实现图片的轮转

    Jquery+timers插件实现图片轮转

    很多网站上多有轮转图片,有的是用flash的,有的是用js的,前几天用了timers这个插件,感觉很不错,就试着写一下轮转图片。 效果还可以,简单明了

    图片轮转效果

    用javascript的面向对象的方法写的一个图片轮转效果。里面还有诸多不足之处。

    图片相册无限轮转

    本插件实现了多个横向排列的图片想一个方向滑动的功能,且收尾相接,会有无限滑动且作品很多的感觉,用于作品或者品牌展示

    实现轮换图片的js,可实现图片轮换播放

    实现轮换图片的js,可实现图片轮换播放,下载后在jsp中调用即可。

    jq实现全屏图片轮换效果.zip

    jq实现全屏图片轮换效果可以实现全屏焦点图左右滚动切换效果,图片上下自适应。 jq实现全屏图片轮换效果演示图: 点击查看演示

    图片轮换左右按钮

    js实现html网页图片轮换效果,左右带有按钮

    JavaScript旋转木马

    JavaScript实现图片动态轮转

    javascript实现循环广告条效果

    主要为大家详细介绍了javascript实现循环广告条效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

    JS图片自动轮换效果实现思路附截图

    主要介绍了JS实现的图片自动轮换效果,有具体的实现思路及截图,希望对大家学习有所帮助

    图案片轮转经典小例

    例子是使用js实现图片的轮换,就像百度视频新闻首页的几条即时新闻一样,自动轮换,上述文件中包含图片轮换的具体实现(js文件)和一个html测试文件(你也可放在jsp中)

    jquery.theatre 多图轮转效果插件

    jquery.theatre 多图轮转效果插件,超炫! 可实现3D旋转,2d左右上下自动切换图片,纯JQuery插件,实用! 用了才知道……

    jQuery响应式图片轮播旋转展示插件

    jQuery.vitrine.js是一款非常实用的响应式图片轮播旋转展示jQuery插件。该图片轮播插件就像在玻璃橱柜中展示商品一样。用户点击某一张图片之后,图片就会向屏幕中间旋转移动。该插件与旋转木马类似,非常适合用于...

    JQuery实现滑动banner轮番图(1030修改)

    轮番图常用的图片信息展示效果 也是每一个初级前端人员需要学习的效果 实现滑动的原理是:控制同级元素的整体位置 再通过jquery的动作animate 缓慢的实现这一过程 则就会显现滑动效果 下面是菜鸟的代码演示 代码的...

    jquery+ajax无刷新评论源码(包含无刷新分页)

    发表评论无刷新,www.sendawangluo.com页面获取评论时显示loading加载效果jquery真的是一个非常优秀的JS库,简单容易掌握,对于网页中的多级菜单、级联效果、Tab选项卡切换、图片轮转显示,实现起来都非常的简单,...

    javascript中的缓动效果实现程序

    javascript中的缓动效果可以应用于很多地方,比如距离位移上的变化:图片的滚动、焦点图的轮转切换,透明度上的变化:渐隐渐现。凡是存在运动的状态都适用,下面以最基本的块在容器内从左到右滑动为例,讲下几种不同...

    JQuery立体3D轮播图源码

    使用JQuery实现网页轮播效果 有自动轮转 计算左右的距离 for(var i=0;i;i++){ // 计算左侧的图片位置 lNum=indexId-i-1; $('img').eq(lNum).css({ transform:'translateX('+(-150*(i+1))+'px) translateZ('+(100...

Global site tag (gtag.js) - Google Analytics