这是一个服务器端控件，vs2005/.net2.0开发。该控件通过服务器端程序，将指定（磁盘或http）的图片进行裁切后，讲图片、缩略图地址及javascript代码返回到客户端，并在浏览器中构建一个动画（淡出淡入）方式切换的图片轮显单元。
服务器端文件包含一份图片裁切代码（ThumbMaker.cs）和一份服务器控件构建代码（ImageSlide.cs）。先从简单的ThumbMaker说起：
WEB要显示的图片，必须有一个实体。或者说，服务器上必须存在那样一个文件。并且我比较讲究效果，并不想直接显示原图，所以，处理后的图片，必须要保存到服务器端。ThumbMaker就是做这个工作的，它可以处理两类文件：本地的，和HTTP的。本地不必多讲了，http图片就是先下载保存本地，而后按本地图片处理。判断的方式是使用URI。
if (uri.IsFile) { FileInfo fi = new FileInfo(url); // other code } else { using (MK.Download d = new Download(uri)) { d.Get(); Image i = Image.FromStream(d.ResultStream); // other code }
}
下载和图片处理的程序都写成工具封装了，所以这份代码主要是处理url格式、判断web文件夹物理位置和创建文件夹等等一些周边的工作。
再说ImageSlide.cs
public class ImageSlide : WebControl, INamingContainer
继承INamingContainer，是为了在页面上拖拽多个控件时自动区别命名。
首先定义几个布局方面所需的属性
Code [Bindable(true)] [Category("MK.Control.ImageSlide")] [Description("主图片宽度(px)")] [DefaultValue(400)] [Localizable(true)]public int MainImageWidth { get { object o = ViewState["MainImageWidth"]; if (o == null) return 400; try { return (int)o; } catch { return 400; } } set { ViewState["MainImageWidth"] = value; } } [Bindable(true)] [Category("MK.Control.ImageSlide")] [Description("主图片右侧间隙")] [DefaultValue(3)] [Localizable(true)]public int MainImageMarginRight { get { object o = ViewState["MainImageMarginRight"]; if (o == null) return 3; try { return (int)o; } catch { return 3; } } set { ViewState["MainImageMarginRight"] = value; } } [Bindable(true)] [Category("MK.Control.ImageSlide")] [Description("缩图间隙")] [DefaultValue(3)] [Localizable(true)]public int ThumbImageMargin { get { object o = ViewState["ThumbImageMargin"]; if (o == null) return 3; try { return (int)o; } catch { return 3; } } set { ViewState["ThumbImageMargin"] = value; } } [Bindable(true)] [Category("MK.Control.ImageSlide")] [Description("索引按钮高度")] [DefaultValue(20)] [Localizable(true)]public Unit IndexTableHeight { get { object o = ViewState["IndexTableHeight"]; if (o == null) return Unit.Pixel(20); try { return (Unit)o; } catch { return Unit.Pixel(20); } } set { ViewState["IndexTableHeight"] = value; } } [Bindable(true)] [Category("MK.Control.ImageSlide")] [Description("索引按钮高度")] [DefaultValue(0)] [Localizable(true)]public Unit IndexTableOffset { get { object o = ViewState["IndexTableOffset"]; if (o == null) return Unit.Pixel(0); try { return (Unit)o; } catch { return Unit.Pixel(0); } } set { ViewState["IndexTableOffset"] = value; } } [Bindable(true)] [Category("MK.Control.ImageSlide")] [Description("标题栏背景颜色")] [Localizable(true)]public System.Drawing.Color TextBarBackColor { get { object o = ViewState["TextBarBackColor"]; if (o == null) return System.Drawing.Color.FromArgb(0x33, 0x33, 0x33); return (System.Drawing.Color)o; } set { ViewState["TextBarBackColor"] = value; } } [Bindable(true)] [Category("MK.Control.ImageSlide")] [Description("标题字数限制")] [DefaultValue(20)] [Localizable(true)]public int TextLengthLimit { get { object o = ViewState["TextLengthLimit"]; if (o == null) return 20; try { return (int)o; } catch { return 20; } } set { ViewState["TextLengthLimit"] = value; } } [Bindable(true)] [Category("MK.Control.ImageSlide")] [Description("主图片容器颜色")] [Localizable(true)]public System.Drawing.Color MainImageColor { get { object o = ViewState["MainImageColor"]; if (o == null) return System.Drawing.Color.FromArgb(0xfa, 0xfa, 0xfa); return (System.Drawing.Color)o; } set { ViewState["MainImageColor"] = value; } } 由于一张图片包括服务器位置（或http地址）、说明文字及字数超长限制、文字颜色、大图尺寸、小图尺寸等多个属性，所以定义了一个ImageItem对象，来集中存储所有这些信息。下面是这个子类的完整代码，非常简单的一个隐藏的控件。
Code [DesignTimeVisible(false)] [ToolboxData("<{0}:ImageItem runat=server></{0}:ImageItem>")]public class ImageItem : WebControl { private string _OriginalImageUrl = String.Empty; [Category("MK.Control.ImageSlide.ImageItem")] public string OriginalImageUrl { get { return _OriginalImageUrl; } set { _OriginalImageUrl = value; } } private string _ThumbImageUrl = String.Empty; [Category("MK.Control.ImageSlide.ImageItem")] public string ThumbImageUrl { get { return _ThumbImageUrl; } set { _ThumbImageUrl = value; } } private string _ViewImageUrl = String.Empty; [Category("MK.Control.ImageSlide.ImageItem")] public string ViewImageUrl { get { return _ViewImageUrl; } set { _ViewImageUrl = value; } } private string _HRef = String.Empty; [Category("MK.Control.ImageSlide.ImageItem")] public string HRef { get { return _HRef; } set { _HRef = value; } } private string _Text = String.Empty; [Category("MK.Control.ImageSlide.ImageItem")] public string Text { get { return _Text; } set { _Text = value; } } private int _TextLimit; [Category("MK.Control.ImageSlide.ImageItem")] public int TextLimit { get { return _TextLimit; } set { _TextLimit = value; } } public string LimitText { get { if (_Text.Length <= _TextLimit) return _Text; return _Text.Substring(0, _TextLimit) + "…"; } } private int _Offset; [Category("MK.Control.ImageSlide.ImageItem")] public int Offset { get { return _Offset; } set { _Offset = value; } } private Unit _ThumbWidth = new Unit(); [Category("MK.Control.ImageSlide.ImageItem")] public Unit ThumbWidth { get { return _ThumbWidth; } set { _ThumbWidth = value; } } private Unit _ThumbHeight = new Unit(); [Category("MK.Control.ImageSlide.ImageItem")] public Unit ThumbHeight { get { return _ThumbHeight; } set { _ThumbHeight = value; } } private Unit _ViewHeight = new Unit(); [Category("MK.Control.ImageSlide.ImageItem")] public Unit ViewHeight { get { return _ViewHeight; } set { _ViewHeight = value; } } private Unit _ViewWidth = new Unit(); [Category("MK.Control.ImageSlide.ImageItem")] public Unit ViewWidth { get { return _ViewWidth; } set { _ViewWidth = value; } } internal void Deal() { ThumbMaker.DealImageItem(this); } private int _TextBarOffset; [Category("MK.Control.ImageSlide.ImageItem")] public int TextBarOffset { get { return _TextBarOffset; } set { _TextBarOffset = value; } } private Unit _TextBarHeight; [Category("MK.Control.ImageSlide.ImageItem")] public Unit TextBarHeight { get { return _TextBarHeight; } set { _TextBarHeight = value; } } [Category("MK.Control.ImageSlide.ImageItem")] private System.Drawing.Color _TextBarBackColor = System.Drawing.Color.FromArgb(0x33, 0x33, 0x33); public System.Drawing.Color TextBarBackColor { get { return _TextBarBackColor; } set { _TextBarBackColor = value; } } private HtmlAnchor _ViewImage; internal HtmlAnchor ViewImage { get { if (_ViewImage == null) _ViewImage = new HtmlAnchor(); if (_ViewImageUrl != String.Empty) { HtmlImage hi = new HtmlImage(); hi.Src = _ViewImageUrl; hi.Style[HtmlTextWriterStyle.BorderWidth] = "0px"; HtmlGenericControl textBar = new HtmlGenericControl("div"); textBar.InnerText = LimitText; textBar.Style[HtmlTextWriterStyle.Height] = _TextBarHeight.ToString(); textBar.Style[HtmlTextWriterStyle.Width] = String.Format("{0}px", (int)(_ViewWidth.Value - 5)); textBar.Style[HtmlTextWriterStyle.Position] = "relative"; textBar.Style[HtmlTextWriterStyle.MarginTop] = String.Format("-{0}px", _TextBarOffset); textBar.Style[HtmlTextWriterStyle.BackgroundColor] = System.Drawing.ColorTranslator.ToHtml(_TextBarBackColor); textBar.Attributes.Add("class", "ImageSlite_TitleBar"); _ViewImage.Controls.Add(hi); _ViewImage.Controls.Add(textBar); _ViewImage.HRef = HRef; _ViewImage.Target = "_blank"; _ViewImage.Style[HtmlTextWriterStyle.BorderWidth] = "0px"; _ViewImage.Style[HtmlTextWriterStyle.Display] = "block"; _ViewImage.Style[HtmlTextWriterStyle.Overflow] = "hidden"; } else { _ViewImage.InnerText = _Text; } _ViewImage.Attributes["title"] = Text; return _ViewImage; } } private HtmlAnchor _ThumbImage; internal HtmlAnchor ThumbImage { get { if (_ThumbImage == null) _ThumbImage = new HtmlAnchor(); if (_ThumbImageUrl != String.Empty) { HtmlImage hi = new HtmlImage(); hi.Src = _ThumbImageUrl; hi.Style[HtmlTextWriterStyle.BorderWidth] = "0px"; _ThumbImage.Controls.Add(hi); } else { _ThumbImage.InnerText = LimitText; } _ThumbImage.Style.Value = Style.Value; _ThumbImage.Style[HtmlTextWriterStyle.Display] = "block"; _ThumbImage.HRef = HRef; _ThumbImage.Target = "_blank"; _ThumbImage.Attributes["title"] = Text; return _ThumbImage; } } protected override void Render(HtmlTextWriter writer) { if ((int)ThumbWidth.Value > 0) { writer.AddAttribute(HtmlTextWriterAttribute.Href, _HRef); writer.AddAttribute(HtmlTextWriterAttribute.Title, _Text); //writer.AddAttribute(HtmlTextWriterAttribute.Style, String.Format("display:block;width:{0};height:{1}", _ThumbWidth, _ViewHeight)); writer.RenderBeginTag(HtmlTextWriterTag.A); writer.AddAttribute(HtmlTextWriterAttribute.Src, _ThumbImageUrl); writer.RenderBeginTag(HtmlTextWriterTag.Img); writer.RenderEndTag(); writer.RenderEndTag(); } } } 下面是一个稍微复杂的问题，就是以集合的方式在ImageSilde内存储ImageItem。不过随着时间推移，现在类似的文章越来越多了，其实也很容易GOOGLE到答案。不过那些文章大部分是用ArrayList来存储。出于C#类型安全的初衷，我使用泛型来存储集合。
下面是ImageSlide中的ImageItem集合设置：
private List < ImageItem > _ImageItemList; [Bindable( true )] [Category( " MK.Control.ImageSlide " )] [DesignerSerializationVisibility(DesignerSerializationVisibility.Content)] [PersistenceMode(PersistenceMode.InnerProperty)] [Editor( typeof (System.ComponentModel.Design.CollectionEditor), typeof (System.Drawing.Design.UITypeEditor))] [NotifyParentProperty( true )] public List < ImageItem > ImageItemList { get { if (_ImageItemList == null ) { _ImageItemList = new List < ImageItem > (); } return _ImageItemList; } }
关键部分的内容，就是这些了。下一篇讲叙述该控件的js部分的内容。