今天正好有时间，总结一下通过javascript来实现切换图片，可以通过以下几种方法实现：
方法一：实现简单的图片切换
可以自己配置,自己设置每张图片切换的时间间隔,自己设置每张图片的路径(绝对,相对路径都可以)
<html>
<head>
<title>例子1：实现简单的图片切换</title>
<script language=javascript>
var curIndex=0;
//时间间隔 单位毫秒
var timeInterval=1000;
var arr=new Array();
arr[0]="1.jpg";
arr[1]="2.jpg";
arr[2]="3.jpg";
setInterval(changeImg,timeInterval);
function changeImg()
{
var obj=document.getElementById("obj");
if (curIndex==arr.length-1)
{
curIndex=0;
}
else
{
curIndex+=1;
}
obj.src=arr[curIndex];
}
</script>
</head>
<body>
<img id=obj src ="1.jpg" border =0 />
</body>
</html>
方法二：实现幻灯片切换图片
包含的二个JS文件中，包括关于adRotator所有函数的实现。
<html>
<head>
<script language="javascript" src="CreateDiv.js4"></script>
<script language="javascript" src="aaaaaa.js4"></script>
</head>
<body>
<form id=form1>
<table cellspacing=0 cellspadding=0 bodor=0 width=100%>
<tr>
<td>
<div id="AdRotator" class="AdRotator" style="margin-bottom:0px;"></div>
</td>
</tr>
</table>
<INPUT id="hdImg1" type="hidden" name="hdImg" value="http://www.webjx.com/img/200406304.jpg"/>
<INPUT id="hdImg2" type="hidden" name="hdImg" value="http://www.webjx.com/img/200406305.jpg"/>
<INPUT id="hdImg3" type="hidden" name="hdImg" value="http://www.webjx.com/img/200406303.jpg"/>
<INPUT id="hdImg4" type="hidden" name="hdImg" value="http://www.webjx.com/img/200406302.jpg"/>
<INPUT id="hdImg5" type="hidden" name="hdImg" value="http://www.webjx.com/img/200406301.jpg"/>
<SCRIPT language="JavaScript">
<!--
var hdImg = new Array();
for( var i = 0 ; i < 5 ; i++)
{
eval("hdImg[" + i + "] = document.forms[0].elements.hdImg" + (i+1) + ".value");
};
adRotator.initialize("AdRotator");
for( var i=0 ; i < hdImg.length ; i ++)
{
adRotator.add(hdImg[i]);
}
adRotator.play();
//-->
</SCRIPT>
</form>
</body>
</html>
方法三：js和flash结合的图片切换，例如现在好多网站上面的新闻切换，并可链接地址。
<html>
<head>
<title>js和flash切换图片</title>
</head>
<body>
<a target="_self" href="javascript:goUrl()"><span class="f14b">
<script type="text/javascript">
imgUrl1="http://proimg.163.com/channel6/ebay/mail_145x90.jpg";
imgtext1="网页教学网制作素材"
imgLink1=escape("http://cimg2.163.com/cnews/2007/11/20/200711200904102880e.jpg");
imgUrl2="http://www.webjx.com/img/200406302.jpg";
imgtext2="网页教学网网页制作专区"
imgLink2=escape("http://www.webjx.com/htmldata/sort/3.html");
imgUrl3="http://www.webjx.com/img/200406303.jpg";
imgtext3="网页教学网网页特效专区"
imgLink3=escape("http://www.webjx.com/htmldata/sort/5.html");
imgUrl4="http://www.webjx.com/img/200406304.jpg";
imgtext4="网页教学网视频教程"
imgLink4=escape("http://www.webjx.com/htmldata/sort/15.html");
imgUrl5="http://www.webjx.com/img/200406305.jpg";
imgtext5="网页教学网网页制作书籍"
imgLink5=escape("http://www.webjx.com/htmldata/sort/7.html");
var focus_width=280
var focus_height=200
var text_height=18
var swf_height = focus_height+text_height
var pics=imgUrl1+"|"+imgUrl2+"|"+imgUrl3+"|"+imgUrl4+"|"+imgUrl5
var links=imgLink1+"|"+imgLink2+"|"+imgLink3+"|"+imgLink4+"|"+imgLink5
var texts=imgtext1+"|"+imgtext2+"|"+imgtext3+"|"+imgtext4+"|"+imgtext5
document.write('<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0" width="'+ focus_width +'" height="'+ swf_height +'">');
document.write('<param name="allowScriptAccess" value="sameDomain"><param name="movie" value="
http://www.webjx.com/js/focus.swf"><param name="quality" value="high"><param name="bgcolor" value="#F0F0F0">');
document.write('<param name="menu" value="false"><param name=wmode value="opaque">');
document.write('<param name="FlashVars" value="pics='+pics+'&links='+links+'&texts='+texts+'&borderwidth='+focus_width+'&borderheight='+focus_height+'&textheight='+text_height+'">');
document.write('<embed src="pixviewer.swf" wmode="opaque" FlashVars="pics='+pics+'&links='+links+'&texts='+texts+'&borderwidth='+focus_width+'&borderheight='+focus_height+'&textheight='+text_height+'" menu="false" bgcolor="#F0F0F0" quality="high" width="'+ focus_width +'" height="'+ focus_height +'" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />');
document.write('</object>');
</script>
</span></a><span id="focustext" class="f14b"></span>
</body>
</html>
本文参考：
posted @ 2007-11-20 15:01 笑看人生 阅读(2645) 评论(2)
编辑
最近,发现在用DataGrid显示数据的时候,英文的不会自动换行,而会把页面撑的很难看,而中文就不会出现这个问题.所以研究了一下,发现这样可以解决问题.
(1)首先在DataGrid中添加一个模板列;
(2)在模板列里增加一个<DIV></DIV>标签,然后设置其Style属性.
<div style="width:100px;word-wrap:break-word;word-break:break-all">...</div>
例如:
Test.aspx代码:(直接拷贝到.aspx页面的body里,红色的是重点)
<table cellSpacing=0 cellPadding=0 width="180px" align=center border=1>
<tr>
<td>
<asp:datagrid id=DataGrid2 AutoGenerateColumns="False" runat="server" Width="100%">
<columns>
<asp:boundcolumn HeaderText="ID" DataField="ID"></asp:boundcolumn>
<asp:templatecolumn HeaderText="内容">
<itemtemplate>
<div style="WIDTH: 150px; WORD-WRAP: break-word;word-break:break-all"><%#databinder.eval(container.dataitem,"content")%></div>
</itemtemplate>
</asp:templatecolumn>
</columns>
</asp:datagrid>
</td>
</tr>
</table>
Test.cs文件:(可直接把代码复制到.cs里)
private void Page_Load(object sender, System.EventArgs e)
{
DataGrid2.DataSource=CreateDataView();
DataGrid2.DataBind();
}
private DataView CreateDataView()
{
DataTable dt=new DataTable ();
dt.Columns.Add("ID",typeof(Int32));
dt.Columns.Add("Content",typeof(String));
DataRow dr;
for (int i=0;i<3;i++)
{
dr=dt.NewRow();
dr[0]=i.ToString();
dr[1]="163.com,163.com,163.com,163.com,163.com,163.com,163.com,163.com,163.com,163.com";
dt.Rows.Add(dr);
}
DataView dv=new DataView (dt);
return dv;
}
posted @ 2006-08-14 21:31 笑看人生 阅读(524) 评论(0)
编辑