封装一个图片轮换的web控件
现在很多网站的首页都有那种图片轮换的新闻报道:如下图
于是今天我花了半天多的时间自己给封装了一个,(说明一下:在这种大热天没有空调的环境下,我竟然还感冒了,真是命苦啊 555)
控件有些不足的是 1 样式比较呆板,就支持如上图样式,因为这是基于一个Flash播放的,不是通过JS来控制的; 2 设计时的视图简单了点,目前就是让它只显示第一张图片,其实也够了,没必要搞多复杂,只要运行时效果好就行了,嘿嘿
看看主要代码把:
代码比较简单,这里主要把一个flash作为嵌入的资源了,以前从来没用过,现在感觉微软蛮强的哦 :)
用法:
1 直接在设计时,添加图片
2 动态添加
protected void Button1_Click(object sender, EventArgs e) {
this.RotatePictures1.Pictures.Add(new WebEX.Picture("images/02.jpg", "baidu", "http://www.baidu.com"));
this.RotatePictures1.Pictures.Add(new WebEX.Picture("images/03.jpg", "163", "http://www.163.com"));
}
多多赐教,最后献上源码
于是今天我花了半天多的时间自己给封装了一个,(说明一下:在这种大热天没有空调的环境下,我竟然还感冒了,真是命苦啊 555)
控件有些不足的是 1 样式比较呆板,就支持如上图样式,因为这是基于一个Flash播放的,不是通过JS来控制的; 2 设计时的视图简单了点,目前就是让它只显示第一张图片,其实也够了,没必要搞多复杂,只要运行时效果好就行了,嘿嘿
看看主要代码把:
using System;
using System.Collections.Generic;
using System.Text;
using System.Web.UI.WebControls;
using System.ComponentModel;
using System.Web.UI;
using System.Drawing.Design;
using System.Drawing;
using System.Collections.ObjectModel;
[assembly: WebResource(WebEX.RotatePictures.SWF, "application/x-shockwave-flash")]
namespace WebEX {
/// <summary>
/// 图片轮换控件
/// </summary>
[ToolboxData("<{0}:RotatePictures runat=server></{0}:RotatePictures>")]
[ParseChildren(true, "Pictures")]
[Designer(typeof(RotatePicturesDesigner))]
public class RotatePictures : WebControl {
public RotatePictures() {
this.Width = 240;
this.Height = 200;
}
/// <summary>
/// 嵌入资源:即webResource=命名空间+相对路径+文件名(包括后缀)
/// </summary>
public const string SWF = "WebEX.focus.swf";
/// <summary>
/// 图片集合
/// </summary>
private PictureCollection _pictures = new PictureCollection();
protected override void RenderContents(HtmlTextWriter writer) {
string pics = "";
string links = "";
string texts = "";
foreach (Picture pp in Pictures) {
pics += pp.Pic + "|";
links += pp.Link + "|";
texts += pp.Text + "|";
}
if (!string.IsNullOrEmpty(pics)) {
pics = pics.Substring(0, pics.Length - 1);
}
if (!string.IsNullOrEmpty(links)) {
links = links.Substring(0, links.Length - 1);
}
if (!string.IsNullOrEmpty(texts)) {
texts = texts.Substring(0, texts.Length - 1);
}
string flash = this.Page.ClientScript.GetWebResourceUrl(this.GetType(), SWF);
StringBuilder builder = new StringBuilder();
builder.Append("<a target=_self href=\"javascript:goUrl()\">");
builder.Append("<span>");
builder.Append("<script type=\"text/javascript\">");
builder.Append("\r");
builder.Append("var focus_width="+this.Width.Value);
builder.Append("\r");
builder.Append("var focus_height=" + this.Height.Value);
builder.Append("\r");
builder.Append("var text_height=" + this.Text_height);
builder.Append("\r");
builder.Append("var swf_height = focus_height+text_height");
builder.Append("\r");
builder.Append("var pics='" + pics+"'");
builder.Append("\r");
builder.Append("var links='" + links+"'");
builder.Append("\r");
builder.Append("var texts='" + texts+"'");
builder.Append("\r");
builder.Append(@"document.write('<object classid=""clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"" codebase=""http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0"" width=""'+ focus_width +'"" height=""'+ swf_height +'"">');");
builder.Append("\r");
builder.Append(@"document.write('<param name=""movie"" value="+flash+">");
builder.Append(@"<param name=""quality"" value=""high""><param name=""bgcolor"" value=" + ColorToHtmlFormat(TextColor) + ">');");
builder.Append("\r");
builder.Append(@"document.write('<param name=""FlashVars"" value=""pics='+pics+'&links='+links+'&texts='+texts+'&borderwidth='+focus_width+'&borderheight='+focus_height+'&textheight='+text_height+'"">');");
builder.Append("\r");
builder.Append(@"document.write('</object>');");
builder.Append("\r");
builder.Append("</script>");
builder.Append("</span>");
builder.Append("</a>");
writer.WriteLine(builder.ToString());
base.RenderContents(writer);
}
[Category("Behavior")]
[Description("添加图片")]
[DesignerSerializationVisibility(DesignerSerializationVisibility.Content)]
[PersistenceMode(PersistenceMode.InnerDefaultProperty)]
public PictureCollection Pictures {
get {
if (_pictures == null) {
return new PictureCollection();
}
return _pictures;
}
}
private int _text_height=18;
[Category("Layout"),Description("文字标题的高度,0为不显示")]
public int Text_height {
get { return _text_height; }
set {
if (value<0) {
throw new ArgumentOutOfRangeException("高度不能小于0");
}
_text_height = value;
}
}
private Color _textColor = ColorTranslator.FromHtml("#F0F0F0");
[Category("Layout"), Description("文字标题的背景色")]
[TypeConverter(typeof(WebColorConverter))]
public Color TextColor {
get { return _textColor; }
set { _textColor = value; }
}
/// <summary>
/// 把Color转换成html标准颜色
/// </summary>
/// <param name="c">Color</param>
/// <returns></returns>
public string ColorToHtmlFormat(Color c) {
return "#" + c.ToArgb().ToString("x").Remove(0, 2);
}
}
/// <summary>
/// 图片集合
/// </summary>
public class PictureCollection : Collection<Picture> { }
/// <summary>
/// 图片
/// </summary>
public class Picture {
public Picture() {
}
/// <summary>
/// 构造函数
/// </summary>
/// <param name="pPic">图片地址</param>
/// <param name="pText">文字标题</param>
/// <param name="pLink">超链接</param>
public Picture(string pPic,string pText, string pLink) {
_pic = pPic;
_text = pText;
_link = pLink;
}
private string _pic;
/// <summary>
/// 图片
/// </summary>
[Category("Behavior"), DefaultValue(""), Description("图片地址"), NotifyParentProperty(true)]
[Editor("System.Web.UI.Design.ImageUrlEditor, System.Design, Version=2.0.0.0, Culture=neutral, PublicKeyToken=b03f5f7f11d50a3a", typeof(UITypeEditor))]
[UrlProperty]
public string Pic {
get { return _pic; }
set {
if (value.StartsWith("~/")) {
value=value.Substring(2);
}
_pic = value;
}
}
private string _text;
[Category("Behavior"), DefaultValue(""), Description("文字标题"), NotifyParentProperty(true)]
public string Text {
get { return _text; }
set { _text = value; }
}
private string _link;
[Category("Behavior"), DefaultValue(""), Description("超链接"), NotifyParentProperty(true)]
public string Link {
get { return _link; }
set { _link = value; }
}
}
}
using System.Collections.Generic;
using System.Text;
using System.Web.UI.WebControls;
using System.ComponentModel;
using System.Web.UI;
using System.Drawing.Design;
using System.Drawing;
using System.Collections.ObjectModel;
[assembly: WebResource(WebEX.RotatePictures.SWF, "application/x-shockwave-flash")]
namespace WebEX {
/// <summary>
/// 图片轮换控件
/// </summary>
[ToolboxData("<{0}:RotatePictures runat=server></{0}:RotatePictures>")]
[ParseChildren(true, "Pictures")]
[Designer(typeof(RotatePicturesDesigner))]
public class RotatePictures : WebControl {
public RotatePictures() {
this.Width = 240;
this.Height = 200;
}
/// <summary>
/// 嵌入资源:即webResource=命名空间+相对路径+文件名(包括后缀)
/// </summary>
public const string SWF = "WebEX.focus.swf";
/// <summary>
/// 图片集合
/// </summary>
private PictureCollection _pictures = new PictureCollection();
protected override void RenderContents(HtmlTextWriter writer) {
string pics = "";
string links = "";
string texts = "";
foreach (Picture pp in Pictures) {
pics += pp.Pic + "|";
links += pp.Link + "|";
texts += pp.Text + "|";
}
if (!string.IsNullOrEmpty(pics)) {
pics = pics.Substring(0, pics.Length - 1);
}
if (!string.IsNullOrEmpty(links)) {
links = links.Substring(0, links.Length - 1);
}
if (!string.IsNullOrEmpty(texts)) {
texts = texts.Substring(0, texts.Length - 1);
}
string flash = this.Page.ClientScript.GetWebResourceUrl(this.GetType(), SWF);
StringBuilder builder = new StringBuilder();
builder.Append("<a target=_self href=\"javascript:goUrl()\">");
builder.Append("<span>");
builder.Append("<script type=\"text/javascript\">");
builder.Append("\r");
builder.Append("var focus_width="+this.Width.Value);
builder.Append("\r");
builder.Append("var focus_height=" + this.Height.Value);
builder.Append("\r");
builder.Append("var text_height=" + this.Text_height);
builder.Append("\r");
builder.Append("var swf_height = focus_height+text_height");
builder.Append("\r");
builder.Append("var pics='" + pics+"'");
builder.Append("\r");
builder.Append("var links='" + links+"'");
builder.Append("\r");
builder.Append("var texts='" + texts+"'");
builder.Append("\r");
builder.Append(@"document.write('<object classid=""clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"" codebase=""http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0"" width=""'+ focus_width +'"" height=""'+ swf_height +'"">');");
builder.Append("\r");
builder.Append(@"document.write('<param name=""movie"" value="+flash+">");
builder.Append(@"<param name=""quality"" value=""high""><param name=""bgcolor"" value=" + ColorToHtmlFormat(TextColor) + ">');");
builder.Append("\r");
builder.Append(@"document.write('<param name=""FlashVars"" value=""pics='+pics+'&links='+links+'&texts='+texts+'&borderwidth='+focus_width+'&borderheight='+focus_height+'&textheight='+text_height+'"">');");
builder.Append("\r");
builder.Append(@"document.write('</object>');");
builder.Append("\r");
builder.Append("</script>");
builder.Append("</span>");
builder.Append("</a>");
writer.WriteLine(builder.ToString());
base.RenderContents(writer);
}
[Category("Behavior")]
[Description("添加图片")]
[DesignerSerializationVisibility(DesignerSerializationVisibility.Content)]
[PersistenceMode(PersistenceMode.InnerDefaultProperty)]
public PictureCollection Pictures {
get {
if (_pictures == null) {
return new PictureCollection();
}
return _pictures;
}
}
private int _text_height=18;
[Category("Layout"),Description("文字标题的高度,0为不显示")]
public int Text_height {
get { return _text_height; }
set {
if (value<0) {
throw new ArgumentOutOfRangeException("高度不能小于0");
}
_text_height = value;
}
}
private Color _textColor = ColorTranslator.FromHtml("#F0F0F0");
[Category("Layout"), Description("文字标题的背景色")]
[TypeConverter(typeof(WebColorConverter))]
public Color TextColor {
get { return _textColor; }
set { _textColor = value; }
}
/// <summary>
/// 把Color转换成html标准颜色
/// </summary>
/// <param name="c">Color</param>
/// <returns></returns>
public string ColorToHtmlFormat(Color c) {
return "#" + c.ToArgb().ToString("x").Remove(0, 2);
}
}
/// <summary>
/// 图片集合
/// </summary>
public class PictureCollection : Collection<Picture> { }
/// <summary>
/// 图片
/// </summary>
public class Picture {
public Picture() {
}
/// <summary>
/// 构造函数
/// </summary>
/// <param name="pPic">图片地址</param>
/// <param name="pText">文字标题</param>
/// <param name="pLink">超链接</param>
public Picture(string pPic,string pText, string pLink) {
_pic = pPic;
_text = pText;
_link = pLink;
}
private string _pic;
/// <summary>
/// 图片
/// </summary>
[Category("Behavior"), DefaultValue(""), Description("图片地址"), NotifyParentProperty(true)]
[Editor("System.Web.UI.Design.ImageUrlEditor, System.Design, Version=2.0.0.0, Culture=neutral, PublicKeyToken=b03f5f7f11d50a3a", typeof(UITypeEditor))]
[UrlProperty]
public string Pic {
get { return _pic; }
set {
if (value.StartsWith("~/")) {
value=value.Substring(2);
}
_pic = value;
}
}
private string _text;
[Category("Behavior"), DefaultValue(""), Description("文字标题"), NotifyParentProperty(true)]
public string Text {
get { return _text; }
set { _text = value; }
}
private string _link;
[Category("Behavior"), DefaultValue(""), Description("超链接"), NotifyParentProperty(true)]
public string Link {
get { return _link; }
set { _link = value; }
}
}
}
代码比较简单,这里主要把一个flash作为嵌入的资源了,以前从来没用过,现在感觉微软蛮强的哦 :)
用法:
1 直接在设计时,添加图片
2 动态添加
protected void Button1_Click(object sender, EventArgs e) {
this.RotatePictures1.Pictures.Add(new WebEX.Picture("images/02.jpg", "baidu", "http://www.baidu.com"));
this.RotatePictures1.Pictures.Add(new WebEX.Picture("images/03.jpg", "163", "http://www.163.com"));
}
多多赐教,最后献上源码