js实现轮转图片

这篇博客介绍了如何使用JavaScript实现图片轮播效果,通过设置滤镜属性和定时器,实现图片之间的平滑过渡。博客中定义了相关变量,如滤镜类型、滤镜数量、转换时间和延迟时间,并创建了用于存储图片信息的数组。通过`Filt_set`函数和`use_Filter`函数处理滤镜应用和图片切换,同时提供了清除计时器的函数`obj_ClearTime`。示例代码展示了如何调用这些功能。

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

// 属性设置
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>

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值