我讲的这个是通过css+div实现的,不是通常的用flash实现的,类似CSDN首页的变化广告效果。
声明我参考了 校服男生 的文章。
先看一下效果图(如http://jkx.suse.edu.cn/new右下角图片滚动效果),实现很简单,请大家仔细看看如下介绍:
首先建立一个页面test.aspx需要包含如下几个JS文件:
<SCRIPT src="js/jsframework.js" type=text/javascript></SCRIPT>
<SCRIPT src="js/Global.js" type=text/javascript></SCRIPT>
<SCRIPT src="js/MzDataProvider.js" type=text/javascript></SCRIPT>
<SCRIPT src="js/MzEffect.js" type=text/javascript></SCRIPT>
<SCRIPT src="js/MzBehavior.js" type=text/javascript></SCRIPT>
<SCRIPT src="js/MzRotateImage.js" type=text/javascript></SCRIPT>
(文章末将提供下载)
前台页面中除了引用上诉文件外,再简单的通过一个变量<%=str %>显示内容(前台如何显示大家可以随意处理,这里只为说明效果),然后我们需要好好处理我们的后台代码了。
test.aspx.cs部分代码如下:(会.net和JS的朋友对如下代码应该很清楚,我就不再一一介绍)
protected static int Repeat1__index = 0 ;
protected static int rs_numRows = rs_numRows + Repeat1__numRows;
protected static int i = 1 ;
protected static string str = null ; // 用户存放返回给前台的数据
protected void Page_Load( object sender, EventArgs e)
... {
if (!this.IsPostBack)
...{
str="<SCRIPT type=text/javascript>var data = {};";
string strdata=null;
OleDbConnection conn = DB.index_createCon();//自己定义的数据库连接方法,这里大家自行处理
string sql = "select * from [FriendLink] where LinkType='图片连接'";
OleDbCommand cmd = new OleDbCommand(sql,conn);
conn.Open();
OleDbDataReader odr = cmd.ExecuteReader();
while (odr.Read())
...{
strdata = "img:" + odr["picurl"].ToString() + ";url:" + odr["LinkUrl"].ToString() + ";target:_blank;alt:;";
str=str+"data['-1_"+i+"']='"+strdata.ToString()+"';";
Repeat1__index=Repeat1__index+1;
Repeat1__numRows=Repeat1__numRows-1;
i=i+1;
}
str=str+"var ri = new MzRotateImage();ri.dataSource =data;";
str = str + "ri.width = 350;ri.height =160;ri.interval = 3000;ri.duration = 2000;document.write(ri.render());</SCRIPT>";
}
}
我在做的过程中没法实现图片的大小改变,我最后的解决办法是,用c#的Image类,根据原图复制一个给定的大小的图片,然后同时存储大小两张图片。
如果有人解决这个问题,请与我分享阿!
http://dl2.csdn.net/down4/20070910/10200335463.rar