这种效果是模仿新浪军事频道首页的效果:

简单实现网站首页图片切换新闻的效果_17901

下面是代码,就一个方法
  1.         public string ListImgNews(int count)
  2.         {
  3.             string sql = string.Empty;
  4.             sql = "select top " + count.ToString() + " * from ImgNews";
  5.             DataTable dt = db.GetDataSet(sql).Tables[0];
  6.             string title = string.Empty;
  7.             string url = string.Empty;
  8.             string imgSrc = string.Empty;
  9.             string html = string.Empty;
  10.             if (dt.Rows.Count > 0)
  11.             {
  12.                 html = "<!--焦点图区域开始 -->";
  13.                 html += "<!--焦点图开始-->";

  14.                 html += "<script type=\"text/javascript\">";
  15.                 html+="var focus_width=250;var focus_height=180;var text_height=21;var swf_height = focus_height+text_height;";



  16.                 int index = 0;
  17.                 for (int i = 0; i < dt.Rows.Count; i++)
  18.                 {
  19.                     index = i + 1;
  20.                     title += dt.Rows["Title"].ToString()+"|";
  21.                     url += Shellliu.Common.webRoot + Shellliu.Common.webPath + "Article/Read.aspx?articlecode=" + dt.Rows["ArticleCode"].ToString() + "|";
  22.                     imgSrc += Shellliu.Common.webRoot + Shellliu.Common.webPath + "Editor/ShowImg.aspx?id=" + dt.Rows["ImgID"].ToString() + "|";
  23.                 }

  24.                 title = title.Substring(0, title.Length - 1);
  25.                 url = url.Substring(0, url.Length - 1);
  26.                 imgSrc = imgSrc.Substring(0, imgSrc.Length - 1);

  27.                 html += "var pics='" + imgSrc + "';";
  28.                 html += "var links='" + url + "';";
  29.                 html += "var texts='" + title + "';";
  30.                 html+="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 +'\">');";
  31.                 html+="document.write('<param name=\"allowScriptAccess\" value=\"sameDomain\"><param name=\"movie\" value=\"pixview.swf\"><param name=\"quality\" value=\"high\"><param name=\"bgcolor\" value=\"#CCCCCC\">');";
  32.                 html+="document.write('<param name=\"menu\" value=\"false\"><param name=wmode value=\"opaque\">');";
  33.                 html+="document.write('<param name=\"FlashVars\" value=\"pics='+pics+'&links='+links+'&texts='+texts+'&borderwidth='+focus_width+'&borderheight='+focus_height+'&textheight='+text_height+'\">');";
  34.                 html+="document.write('<embed src=\"pixview.swf\" wmode=\"opaque\" FlashVars=\"pics='+pics+'&links='+links+'&texts='+texts+'&borderwidth='+focus_width+'&borderheight='+focus_height+'&textheight='+text_height+'\" menu=\"false\" bgcolor=\"#ffffff\" quality=\"high\" width=\"'+ focus_width +'\" height=\"'+ swf_height +'\" allowScriptAccess=\"sameDomain\" type=\"application/x-shockwave-flash\" pluginspage=\"http://www.macromedia.com/go/getflashplayer\"/>');";
  35.                 html+="document.write('</object>');";
  36.                 html+="</script>";
  37.                 html += "<!--焦点图结束-->";
  38.                 html += "<!--焦点图区域结束 -->";
  39.             }

  40.             return html;
  41.         }
复制代码
把其中的参数解释一下:
1、传入参数count是你要显示的图片切换数量,返回组合后的字符串,赋给前台的控件,比如Label。
2、url是每张图片链接的文章地址,imgSrc每张图片的地址,可以是文件夹地址或显示图片页面的地址,title是图片下方显示的文章标题。
3、下面三行代码实现从数据库将图片流或图片路径和对应的文章地址等参数一并提出来,这里用了一个视图ImgNews实现这所有的相关表连接查询。
  1. string sql = string.Empty;
  2. sql = "select top " + count.ToString() + " * from ImgNews";
  3. DataTable dt = db.GetDataSet(sql).Tables[0];
复制代码
4、这三个变量
var focus_width=250;var focus_height=180;var text_height=21;分别为图片的宽度、高度和图片文章标题的文字高度;
5、另外下载附件将里面的两个文件:pixview.fla和pixview.swf放到和你要显示图片新闻页面的同级目录下即可。

源码下载:
附件: 亲,您没有权限下载或查看附件喔:-) 试试登录注册吧!
TOP

好帖必顶
TOP

终于玩好了,淤血
TOP

谢谢楼主分享·~
TOP

学习
TOP

学习
TOP

学习
TOP

很好
TOP

找很久了,如果可以再来支持下楼主
TOP

这个很实用哦。我要一个。谢谢
TOP