一个自动动态播放图片的类（downmoon）新增图片效果

最新推荐文章于 2025-07-13 20:31:25 发布

iteye_20474

最新推荐文章于 2025-07-13 20:31:25 发布

阅读量149

点赞数

文章标签： javascript c# ViewUI

本文介绍了一种基于HTML和JavaScript的图片轮播组件实现方法，包括如何生成轮播所需的HTML结构、JavaScript逻辑以及如何设置图片轮播的速度和显示效果。

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

第一步：创建一个类clsTurnPicture

增加方法如下　：

/**////<summary>

///播放图片类(downmoon)

///</summary>

///<paramname="arrImgName">arrImgName</param>

///<paramname="arrDesc">arrDesc</param>

///<paramname="strShopName">strShopName</param>

///<paramname="strBrandName">strBrandName</param>

///<paramname="strResoourceCode">strResoourceCode</param>

///<paramname="ScrWidth">ScrWidth</param>

///<paramname="ScrHeight">ScrHeight</param>

///<paramname="PicWidth">PicWidth</param>

///<paramname="PicHeight">PicHeight</param>

///<paramname="TextHeight">TextHeight</param>

///<paramname="ToolBarHeight">ToolBarHeight</param>

///<paramname="FontSize">默认为16,px</param>

///<returns></returns>

publicstringgetPicsForHtml(ArrayListarrImgName,ArrayListarrDesc,stringstrShopName,stringstrBrandName,stringstrResoourceCode,intScrWidth,intScrHeight,intPicWidth,intPicHeight,intTextHeight,intToolBarHeight,intFontSize)

...{

StringBuildersb=newStringBuilder();

stringstrHtml="";

if(arrImgName==null)return"";

ArrayListar1=newArrayList(arrImgName);

ArrayListar2=newArrayList(arrDesc);

intlen=ar1.Count;

intlen2=ar1.Count-1;

intlen3=ToolBarHeight-2;

stringstr1="";

stringstr2="";

//strHtm+=@"<html><head><title>Buynow{0}-{1}-{2}图片信息</title>

strHtml=@"<!DOCTYPEHTMLPUBLIC""-//W3C//DTDHTML4.0Transitional//EN""><HTML><HEAD><title>"+strShopName+"-"+strBrandName+"-"+"席位："+strResoourceCode+"-外观展示图"+

@"</title>

<metahttp-equiv=""content-type""content=""text/html;charset=gb2312"">

<metaname=""GENERATOR""Content=""MicrosoftVisualStudio.NET7.1"">

<metaname=""CODE_LANGUAGE""Content=""C#"">

<metaname=""vs_defaultClientScript""content=""JavaScript"">

<metaname=""vs_targetSchema""content=""http://schemas.microsoft.com/intellisense/ie5"">"+System.Environment.NewLine;

sb.Append(strHtml);

sb.Append("<scriptlanguage=JavaScript>"+" ");

sb.Append("<!--Begin"+System.Environment.NewLine);

sb.Append("varinterval=6;//delaybetweenrotatingimages(inseconds)"+System.Environment.NewLine);

sb.Append("interval*=1000;"+System.Environment.NewLine);

sb.Append("varflagtime=0;"+System.Environment.NewLine);

sb.Append("varimage_index=-1;"+System.Environment.NewLine);

sb.Append("image_list=newArray();"+System.Environment.NewLine);

sb.Append("note_list=newnoteArray("+len2.ToString()+")"+System.Environment.NewLine);

sb.Append("varnumber_of_image=image_list.length;"+System.Environment.NewLine);

sb.Append("vartimesnum=0;"+System.Environment.NewLine);

//strHtml=string.Format(strHtml,len.ToString());

stringstrTemp="";

for(intk=0;k<ar1.Count;k++)

...{

strTemp=ar1[k].ToString();

//strHtm+="image_list[k]=newimageItem("+strTemp+")";

str1+="image_list["+k.ToString()+"]=newimageItem(""+strTemp+"")"+"; ";

}

sb.Append(""+System.Environment.NewLine);

for(intk=0;k<ar2.Count;k++)

...{

strTemp=strShopName+"-"+strBrandName+"-"+strResoourceCode+"-"+ar2[k].ToString();

str2+="note_list["+k.ToString()+"]=""+strTemp+"""+"; ";

}

sb.Append(str1);

sb.Append(str2);

sb.Append("functionnoteArray(size)"+System.Environment.NewLine);

sb.Append("{"+System.Environment.NewLine);

sb.Append("this.length=size;"+System.Environment.NewLine);

sb.Append("for(i=1;i<=size;i++)"+System.Environment.NewLine);

sb.Append("{"+System.Environment.NewLine);

sb.Append(@"this[i]="""""+System.Environment.NewLine);

sb.Append("}"+System.Environment.NewLine);

sb.Append("returnthis;"+System.Environment.NewLine);

sb.Append("}"+System.Environment.NewLine);

sb.Append("functioncounternum()"+System.Environment.NewLine);

sb.Append("{"+System.Environment.NewLine);

sb.Append("if(timesnum<"+len2.ToString()+")"+System.Environment.NewLine);

sb.Append("{"+System.Environment.NewLine);

sb.Append("timesnum++;"+System.Environment.NewLine);

sb.Append(@"//document.all.slide_ent.src=""about:blank"";");

sb.Append(System.Environment.NewLine);

sb.Append(@"//document.all.slide_ent.src=""about:blank"";");

sb.Append(System.Environment.NewLine);

sb.Append("}"+System.Environment.NewLine);

sb.Append(@"functionrun(obj)

{

interval=obj.options[obj.selectedIndex].value*1000;

rotateImage();

}");

sb.Append(@"functionstop()

{

interval=0;

}

functionprevious()

{

varnew_image=getPreviousImage();

document[""rImage""].src=new_image;

}

functionnext()

{

varnew_image=getNextImage();

document[""rImage""].src=new_image;

}

functionimageItem(image_location)

{

this.image_item=newImage();

this.image_item.src=image_location;

}

functionnoteItem(note)

{

this.note_item=newImage();

this.note_item.src=note;

}

functionget_ImageItemLocation(imageObj)

{

return(imageObj.image_item.src)

}

functionget_NoteItemLocation(noteObj)

{

return(noteObj.note_item.src)

}

functiongenerate(x,y)

{

varrange=y-x+1;

returnMath.floor(Math.random()*range)+x;

}");

sb.Append(@"functiongetPreviousImage()

{

image_index=image_index-1;

if(image_index<0)

{");

sb.Append("image_index=image_index+"+len.ToString()+";");

sb.Append(@"}

varnew_image=get_ImageItemLocation(image_list[image_index]);

document.all.span_1.innerText=image_index+1;

document.all.summary.innerText=note_list[image_index];

return(new_image);");

sb.Append(System.Environment.NewLine+"}");

sb.Append(@"functiongetNextImage()

{

image_index=image_index+1;

");

sb.Append("if(image_index>="+len.ToString()+")");

sb.Append(System.Environment.NewLine);

sb.Append(@"{");

sb.Append(System.Environment.NewLine);

sb.Append("image_index=image_index-"+len.ToString()+";");

sb.Append(System.Environment.NewLine);

sb.Append("}");

sb.Append(System.Environment.NewLine);

//sb.Append(@"");

sb.Append(@"varnew_image=get_ImageItemLocation(image_list[image_index]);

document.all.span_1.innerText=image_index+1;

document.all.summary.innerText=note_list[image_index];

return(new_image);");

sb.Append(System.Environment.NewLine+"}");

sb.Append(@"

//新增图片效果

functionsetTransition()

{

if(document.all)

{

document.all('rImage').filters.revealTrans.Transition=Math.floor(Math.random()*23);

document.all('rImage').filters.revealTrans.apply();

}

functionplayTransition()

{

if(document.all)

document.all('rImage').filters.revealTrans.play();

}");

strHtml=@"

functionrotateImage()

{

if(interval==0)

{

return1;

}

if(flagtime==1)

{

varnow=newDate();

vartime1=now.getTime();

vartime2;

time1=time1+3000;

time2=now.getTime();

while(time2<time1)

{

now=newDate();

time2=now.getTime();

}

flagtime=0;

}

varnew_image=getNextImage();

setTransition();//新增图片效果

document['rImage'].src=new_image;

varrecur_call=""rotateImage('""+'rImage'+""')"";

playTransition();//新增图片效果

setTimeout(recur_call,interval);

}

//End-->

</script>

<scripttype=""text/javascript""src=""Resource/Script/ygcss.js""></script>

sb.Append(strHtml);

strHtml=@"</HEAD><bodytopmargin=""0""leftmargin=""0""><formname=""frmDispImage"">";

sb.Append(strHtml);

strHtml=@"

<tablebgcolor='#fff2df'border='0'cellpadding='0'cellspacing='0'width='"

+ScrWidth.ToString()+@"'>

<tdalign='center'valign='top'><tableborder='0'cellpadding='0'cellspacing='0'width='100%'>

<tdheight='1'></td>

</tr>

</tbody></table>

<tableborder='0'cellpadding='0'cellspacing='0'height='"+

PicHeight.ToString()+"'width='"+PicWidth.ToString()+@"'align='center'>

<tdalign='center'><imgname=""rImage""src='"+

ar1[0].ToString()+"'width='"+PicWidth+"'height='"+PicHeight+@"'onload=""counternum();""border='0'style='FILTER:revealTrans(duration=3,transition=20)'></td>

</tr>

</tbody></table>

<tableborder='0'cellpadding='0'cellspacing='0'width='100%'>

<tdid=""summary""align='center'height='"+

TextHeight.ToString()+"'style='font-size:"+FontSize.ToString()+"pt;'>"

+strShopName+"-"+strBrandName+"-"+strResoourceCode+"-"+ar2[0].ToString()+@"</td>

</tr>

</tbody></table>

<tableborder='0'cellpadding='0'cellspacing='0'width='100%'>

</tr>

<tr>

<tdbgcolor='#c9beeb'height='"+ToolBarHeight.ToString()+@"'>

<tableborder='0'cellpadding='1'cellspacing='0'width='100%'>

<tdclass='sbody'align='center'height='"+len3.ToString()+"'><fontstyle='font-size:"+FontSize+"pt;'><spanid='span_1'>1</span>/"+len.ToString()+

<imgsrc='Resource/Image/TurnImage/slideshows_bottom_1.gif'alt='开始'onclick=""run(document.frmDispImage.select1)""align='absmiddle'border='0'height='21'width='35'>  <imgsrc='Resource/Image/TurnImage/slideshows_bottom_2.gif'alt='停止'onclick=""stop();""align='absmiddle'border='0'height='21'width='35'>

  <imgsrc='Resource/Image/TurnImage/slideshows_bottom_3.gif'alt='前一张'onclick=""previous();""align='absmiddle'border='0'height='21'width='35'>  <imgsrc='Resource/Image/TurnImage/slideshows_bottom_4.gif'alt='后一张'onclick=""next();""align='absmiddle'border='0'height='21'width='35'>  速度：

<selectname=""select1""onchange=""run(this)"">

<optionvalue=""12"">12sec.</option>

<optionselected=""selected""value=""6"">6sec.</option>

<optionvalue=""3"">3sec.</option>

<optionvalue=""9"">9sec.</option>

</select></font></td>

</tr>

</tbody></table>

</td>

</tr>

<tr>

<tdbgcolor='#625a68'height='1'></td>

</tr>

</tbody></table>

</td>

</tr>

</tbody></table>

</center>

<scriptlanguage=""javascript"">

flagtime=1;

rotateImage();//修改为图片自动播放

</script>

</center>";

sb.Append(strHtml);

sb.Append("</form></body></HTML>");

returnsb.ToString();

}

调用格式：

/**/////ArrayListar1=newArrayList();

////ar1.Clear();

////ar1.Add("http://downmoon-hgh/RichChartServer/Top30/frmForumDisplayImage.aspx?id=160720060328095407");

////ar1.Add("http://downmoon-hgh/RichChartServer/Top30/frmForumDisplayImage.aspx?id=160420060327085709");

////ar1.Add("http://downmoon-hgh/RichChartServer/Top30/frmForumDisplayImage.aspx?id=160420060327091030");

////ar1.Add("http://downmoon-hgh/RichChartServer/Top30/frmForumDisplayImage.aspx?id=160420060327092445");

////

////drawPic(ar1);

if(this.ar1==null||ar1.Count==0)

...{

//this.MsgBox("该席位/资源无外观图！");

//this.CloseWebForm();

return;

}

else

...{

drawPic(ar1);

}

privatevoiddrawPic(ArrayListarrImages)

...{

if(pic==null)

...{

pic=newclsTurnPicture();

}

inti;

ArrayListar2=newArrayList();

ar2.Clear();

for(intk=0;k<arrImages.Count;k++)

...{i=k+1;

ar2.Add("展示图"+i.ToString());

}

Response.Write(pic.getPicsForHtml(arrImages,ar2,CurrShopName,CurBrandName,strResourceCode,1024,768,1022,640,36,34,16));

}