javascript多图片各种渐变循环

本文介绍了一种使用JavaScript实现的多图片渐变循环显示效果的方法,详细展示了如何通过自定义对象和函数来控制图片的渐变过渡、显示周期及标题等内容。

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

多图片各种渐变循环

<script language="javascript"> 
<!-- 
function objSP_Article() {this.ImgUrl=""this.LinkUrl=""this.Title="";} 
function SlidePic_Article(_id) {this.ID=_id; this.Width=0;this.Height=0this.TimeOut=5000this.Effect=23this.TitleLen=0this.PicNum=-1this.Img=nullthis.Url=nullthis.Title=nullthis.AllPic=new Array(); this.Add=SlidePic_Article_Add; this.Show=SlidePic_Article_Show; this.LoopShow=SlidePic_Article_LoopShow;} 
function SlidePic_Article_Add(_SP) {this.AllPic[this.AllPic.length] = _SP;} 
function SlidePic_Article_Show() 
  
if(this.AllPic[0== nullreturn false
  document.write(
"<div align='center'><a  href=target='new' id='Url_" + this.ID + "'><img id='Img_" + this.ID + "' style='width:" + this.Width + "; height:" + this.Height + "; filter: revealTrans(duration=2,transition=23);' src='新闻信息' border='0'></a>"); 
  
if(this.TitleLen != 0) document.write("<br><span id='Title_" + this.ID + "'></span></div>"); 
  
this.Img = document.getElementById("Img_" + this.ID); 
  
this.Url = document.getElementById("Url_" + this.ID); 
  
this.Title = document.getElementById("Title_" + this.ID); 
  
this.LoopShow(); 
}
 
function SlidePic_Article_LoopShow() 
  
if(this.PicNum<this.AllPic.length-1this.PicNum++   
  
else this.PicNum=0;  
  
this.Img.filters.revealTrans.Transition=this.Effect;  
  
this.Img.filters.revealTrans.apply();  
  
this.Img.src=this.AllPic[this.PicNum].ImgUrl; 
  
this.Img.filters.revealTrans.play(); 
  
this.Url.href=this.AllPic[this.PicNum].LinkUrl; 
  
if(this.Title) this.Title.innerHTML="<a href="+this.AllPic[this.PicNum].LinkUrl+" target='new'>"+this.AllPic[this.PicNum].Title+"</a>"
  
this.Img.timer=setTimeout(this.ID+".LoopShow()",this.TimeOut); 
}
 
//--> 
</script>
<script language="javascript"> 
var SlidePic_248 = new SlidePic_Article("SlidePic_248"); //生成对象
SlidePic_248.Width    = 214//宽度
SlidePic_248.Height   = 143//高度
SlidePic_248.TimeOut  = 5000//设置循环时间
SlidePic_248.Effect   = 23//变换种类
SlidePic_248.TitleLen = 20//标题长度
 
var oSP = new objSP_Article(); //生成对象
oSP.ImgUrl        = "1.jpg";//图片路径
oSP.LinkUrl       = ""//图片点击访问路径
oSP.Title         = ""//图片标题
SlidePic_248.Add(oSP);//添加这张图片
//
循环添加图片
var oSP = new objSP_Article(); 
oSP.ImgUrl        
= "2.jpg"
oSP.LinkUrl       
= ""
oSP.Title         
= ""
SlidePic_248.Add(oSP); 
 
SlidePic_248.Show(); 
//开始播放
//
--> 
</script> 
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值