界面很簡單.? 新建一個用戶控件. 然后再拖一個WebBrowser 控件. 邊框什么的.通通為none

先上個使用后的效果圖片

上代碼

[System.Runtime.InteropServices.ComVisibleAttribute(true)]public partial class ucWebImageList : System.Windows.Forms.UserControl{public ucWebImageList(){InitializeComponent();this.webBrowser1.DocumentCompleted += new WebBrowserDocumentCompletedEventHandler(webBrowser1_DocumentCompleted);this.webBrowser1.ScrollBarsEnabled = false;}string bigPicDisplay = "display:none;";int styleMargin_photos = 6;#region 屬性int widthBigPic = 640;/// <summary>/// 大圖的寬【單位px】/// </summary>public int WidthBigPic{get { return widthBigPic; }set { widthBigPic = value; }}int heightBigPic = 400;/// <summary>/// 大圖的高【單位px】/// </summary>public int HeightBigPic{get { return heightBigPic; }set { heightBigPic = value; }}int widthSmallPic = 80;/// <summary>/// 小圖的寬【單位px】/// </summary>public int WidthSmallPic{get { return widthSmallPic; }set { widthSmallPic = value; }}int heightSmallPic = 50;/// <summary>/// 小圖的高【單位px】/// </summary>public int HeightSmallPic{get { return heightSmallPic; }set { heightSmallPic = value; }}bool isBigPicture = false;/// <summary>/// 是否顯示大圖【設置此屬性值會初始化大小圖得寬度】/// </summary>public bool IsBigPicture{get { return isBigPicture; }set { isBigPicture = value; IsBigPriceEvent(); }}List<string> imageListPath = new List<string>();/// <summary>/// 所有小圖的 完整地址url/// </summary>public List<string> ImageListPath{get { return imageListPath; }set { imageListPath = value; }}List<string> imageAltList = new List<string>();/// <summary>/// 設置鼠標放到圖片上顯示的文字/// </summary>public List<string> ImageAltList{get { return imageAltList; }set { imageAltList = value; }}List<string> imageLinkList = new List<string>();/// <summary>/// 點擊小圖打開此鏈接/// </summary>public List<string> ImageLinkList{get { return imageLinkList; }set { imageLinkList = value; }}List<string> imageBigListPath = new List<string>();/// <summary>/// 小圖對應大圖的地址/// </summary>public List<string> ImageBigListPath{get { return imageBigListPath; }set { imageBigListPath = value; }}int widthImageList = 650;/// <summary>/// 整個圖片的寬度/// </summary>public int WidthImageList{get { return widthImageList; }set { widthImageList = value; UpdateBigPicWidth(); }}int speed = 1;/// <summary>/// 滾動的速度 越大越慢/// </summary>public int Speed{get { return speed; }set { speed = value; }}int spec = 20;/// <summary>/// 滾動間距 越大滾動越快/// </summary>public int Spec{get { return spec; }set { spec = value; }}int opa = 100;/// <summary>/// 濾鏡效果 越小越明顯【100為沒有濾鏡效果】/// </summary>public int Opa{get { return opa; }set { opa = value; }}bool isLink = false;/// <summary>/// 點擊圖片是否可以打開圖片鏈接[瀏覽器方式打開][默認不可打開]/// </summary>public bool IsLink{get { return isLink; }set { isLink = value; }}List<string> imgID = new List<string>();/// <summary>/// 圖片的ID 用于刪除圖片使用./// </summary>public List<string> ImgID{get { return imgID; }set { imgID = value; }}//bool isRun = false;/ <summary>/ 是否正在加載中..../ </summary>//public bool IsRun//{// get { return isRun; }// set { isRun = value; }//}#endregion#region 修改屬性引發的方法/// <summary>/// 當設定了圖片列表。即修改大圖的寬度/// </summary>private void UpdateBigPicWidth(){WidthBigPic = widthImageList;}/// <summary>/// 當屬性IsBigPicture改變時執行的方法/// </summary>private void IsBigPriceEvent(){if (isBigPicture){bigPicDisplay = "display:block;";styleMargin_photos = 10;int Height = this.webBrowser1.Height - 25;double hsp = Height * 0.23;double hbp = Height * 0.75;hsp = hsp.ToString().IndexOf('.') < 0 ? (hsp + 0.01) : hsp;hbp = hbp.ToString().IndexOf('.') < 0 ? (hbp + 0.01) : hbp;HeightSmallPic = int.Parse(hsp.ToString().Substring(0, hsp.ToString().IndexOf('.')));HeightBigPic = int.Parse(hbp.ToString().Substring(0, hbp.ToString().IndexOf('.')));this.WidthImageList = this.Width - 20; //設置列表的寬度等于用戶控件的寬度}else{bigPicDisplay = "display:none;";styleMargin_photos = 6;HeightSmallPic = this.webBrowser1.Height - 20;WidthSmallPic = HeightSmallPic;this.WidthImageList = this.Width - 20; //設置列表的寬度等于用戶控件的寬度}}#endregion#region 設置圖片/// <summary>/// 快捷設置圖片[大圖地址將與小圖地址一樣.alt會為空]/// </summary>/// <param name="list">傳入小圖地址</param>/// <param name="isLink"></param>public void SetImageList(List<string> list){for (int i = 0; i < list.Count; i++)imageAltList.Add("");this.imageListPath = list;if (!IsLink){for (int i = 0; i < list.Count; i++)this.imageLinkList.Add("");}else{this.imageLinkList = list;}this.imageBigListPath = list;}/// <summary>/// 添加一個圖片/// </summary>/// <param name="imgsrc">小圖地址</param>/// <param name="imgalt">鼠標放小圖上顯示的字符</param>/// <param name="imglink">點擊此圖片打開得地址</param>/// <param name="imgBigsrc">此小圖對應的大圖地址</param>public void SetImageList(string imgsrc, string imgalt, string imglink, string imgBigsrc){this.imageListPath.Add(imgsrc);this.imageAltList.Add(imgalt);this.imageLinkList.Add(imglink);this.imageBigListPath.Add(imgBigsrc);}/// <summary>/// 設置圖片/// </summary>/// <param name="path">圖片路徑【不含文件名】</param>/// <param name="fileName">圖片文件名【以參數c字符分隔】</param>/// <param name="c">分隔文件名的字符</param>public void SetImageList(string path, string fileName, char c){List<string> ImageListPath = fileName.Split(c).ToList<string>();for (int i = 0; i < ImageListPath.Count; i++){if (ImageListPath[i] != "")ImageListPath[i] = path + ImageListPath[i];}SetImageList(ImageListPath);}#endregion/// <summary>/// 清除數據/// </summary>public void ClearImageList(){this.imageAltList.Clear();this.imageBigListPath.Clear();this.imageLinkList.Clear();this.imageListPath.Clear();this.webBrowser1.DocumentText = "";}/// <summary>/// 加載控件數據【運行前需要對imageListPath屬性賦值】/// </summary>public void Run(){StringBuilder strHtml = new StringBuilder();if (imageListPath.Count > 0){strHtml.Append(GetHTML());}this.webBrowser1.DocumentText = strHtml.ToString();webBrowser1.ObjectForScripting = this; //用于前臺JS調用后臺方法.}/// <summary>/// 停止文檔加載[并同時把isRun修改為false]/// </summary>public void Stop(){if (this.webBrowser1.ReadyState != WebBrowserReadyState.Complete){this.webBrowser1.Stop();//IsRun = false;}}/// <summary>/// 根據屬性list拼接字符串html/// </summary> /// <returns></returns>private string GetHTML(){StringBuilder strHtml = new StringBuilder();strHtml.Append("<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\">");strHtml.Append("<html xmlns=\"http://www.w3.org/1999/xhtml\">");strHtml.Append("<head><meta http-equiv=\"Content-Type\" content=\"text/html; charset=gb2312\" />\n<title></title>\n");strHtml.Append("<meta http-equiv=”X-UA-Compatible” content=”IE=7″ />"); strHtml.Append("<style type=\"text/css\">\n");strHtml.Append("body {margin:0;font:12px Verdana;text-align:center;}\n");strHtml.Append("#tbody {width:" + (WidthImageList + 10) + "px;margin:0px auto;text-align:left; border:1px solid white; }\n");strHtml.Append("#mainbody {width:" + (widthBigPic) + "px;margin:5px;border:1px solid #ccc;padding:1px; " + bigPicDisplay + " }\n");strHtml.Append("#mainphoto {cursor:pointer;display:block;}\n");strHtml.Append("#goleft {float:left;clear:left;margin:6px 5px 0px 3px;}\n");strHtml.Append("#goright {float:right;clear:right;margin:6px 3px 0px 5px;}\n");strHtml.Append("#photos {width:" + (WidthImageList - 22 - 13) + "px;height:" + (HeightSmallPic + 4) + "px;line-height:" + (HeightSmallPic + 4) + "px;border:1px solid white;margin:" + styleMargin_photos + "px 0;overflow:hidden;}\n");strHtml.Append("#showArea img {display:block;float:left;margin:1px 0;cursor:pointer;border:1px solid #ccc;}\n");strHtml.Append(".txt_1 {font:bold 24px Verdana, Tahoma;color:#fff;}\n");strHtml.Append("</style>\n</head>");strHtml.Append("<body><div id=\"tbody\"><div id=\"mainbody\">");strHtml.Append("<img src=\"" + imageListPath[0] + "\" alt=\"\" width=\"" + WidthBigPic + "px\" height=\"" + heightBigPic + "px\" id=\"mainphoto\" rel=\"" + imageListPath[0] + "\" name=\"" + imageListPath[0] + "\" /></div>");strHtml.Append("<span id=\"goleft\" style=\"width:11px; height:" + (HeightSmallPic + 4) + "px; text-align:center; line-height:" + (HeightSmallPic + 4) + "px; border:1px solid #ccc;\"><</span>");strHtml.Append("<span id=\"goright\" style=\"width:11px; height:" + (HeightSmallPic + 4) + "px; text-align:center; line-height:" + (HeightSmallPic + 4) + "px;border:1px solid #ccc;\">></span><div id=\"photos\"><div id=\"showArea\">");for (int i = 0; i < imageListPath.Count; i++){/*SRC: 縮略圖地址REL: 大圖地址NAME: 網址*/string del = "";if (imgID.Count > 0){del = " id=\"" + ImgID[i] + "\" οndblclick=\"fundel(this)\"";}strHtml.Append("<img " + del + " src=\"" + ImageListPath[i] + "\" alt=\"" + ImageAltList[i] + "\" width=\"" + widthSmallPic + "px\" height=\"" + HeightSmallPic + "px\" rel=\"" + ImageBigListPath[i] + "\" name=\"" + ImageLinkList[i] + "\" />");}strHtml.Append("</div></div></div></body></html>");//javascriptstrHtml.Append("<script language=\"javascript\" type=\"text/javascript\"> function fundel(obj){ if(!confirm('確定要刪除此圖片?')) return; var did= obj.id; obj.parentNode.removeChild(obj); window.external.DeleteImage(did); } \n" +"var browse = window.navigator.appName.toLowerCase(); \n" +"var MyMar; \n" +"var speed = " + Spec + "; \n" +"var spec = " + Spec + "; \n" +"var minOpa = 80; \n" +"var maxOpa = 100; \n" +"var spa = 2; \n" +"var w = 0; \n" +"spec = (browse.indexOf(\"microsoft\") > -1) ? spec : ((browse.indexOf(\"opera\") > -1) ? spec*10 : spec*20); \n" +"function $(e) {return document.getElementById(e);} \n" +"function goleft() {$('photos').scrollLeft -= spec;} \n" +"function goright() {$('photos').scrollLeft += spec;} \n" +"function setOpacity(e, n) { \n" +" if (browse.indexOf(\"microsoft\") > -1) e.style.filter = 'alpha(opacity=' + n + ')'; \n" +" else e.style.opacity = n/100; \n" +"} \n" +"$('goleft').style.cursor = 'pointer'; \n" +"$('goright').style.cursor = 'pointer'; \n" +"$('mainphoto').onmouseover = function() {setOpacity(this, maxOpa);} \n" +"$('mainphoto').onmouseout = function() {setOpacity(this, minOpa);} \n" +"$('mainphoto').onclick = function() { var url = this.getAttribute('name'); if(url != '') window.open(url);} \n" +"$('goleft').onmouseover = function() { MyMar=setInterval(goleft, speed);} \n" +"$('goleft').onmouseout = function() { clearInterval(MyMar);} \n" +"$('goright').onmouseover = function() { MyMar=setInterval(goright,speed);} \n" +"$('goright').onmouseout = function() { clearInterval(MyMar);} \n" +"window.onload = function () { \n" +" setOpacity($('mainphoto'), minOpa); \n" +" var rHtml = ''; \n" +" var p = $('showArea').getElementsByTagName('img'); \n" +" for (var i = 0; i < p.length; i++) { \n" +" w += parseInt(p[i].getAttribute('width')) + spa; \n" +" setOpacity(p[i], minOpa); \n" +" p[i].onclick = function () { var url = this.getAttribute('name'); if(url != '') window.open(url); } \n" +" p[i].onmouseover = function () { \n" +" setOpacity(this, maxOpa); \n" +" $('mainphoto').src = this.getAttribute('rel'); \n" +" $('mainphoto').setAttribute('name', this.getAttribute('name')); \n" +" setOpacity($('mainphoto'), maxOpa); \n" +" } \n" +" p[i].onmouseout = function () { \n" +" setOpacity(this, minOpa); \n" +" setOpacity($('mainphoto'), minOpa); \n" +" } \n" +" rHtml += '<img src=\"' + p[i].getAttribute('rel') + '\" width=\"0\" height=\"0\" alt=\"\" />'; \n" +" } \n" +" $('showArea').style.width = parseInt(w) + 'px'; \n" +" var rLoad = document.createElement(\"div\"); \n" +" $('photos').appendChild(rLoad); \n" +" rLoad.style.width = \"1px\"; \n" +" rLoad.style.height = \"1px\"; \n" +" rLoad.style.overflow = \"hidden\"; \n" +" rLoad.innerHTML = rHtml; \n" +" } </script> ");return strHtml.ToString();}/// <summary>/// 刪除圖片方法.[前臺js會調用此方法.無需手動調用.]/// </summary>/// <param name="imgid"></param>public void DeleteImage(string imgid){onDeleteImage(imgid);}/// <summary>/// 加載完成時./// </summary>/// <param name="sender"></param>/// <param name="e"></param>protected void webBrowser1_DocumentCompleted(object sender, WebBrowserDocumentCompletedEventArgs e){if (webBrowser1.ReadyState == WebBrowserReadyState.Complete){//IsRun = false; //加載完成. 修改加載狀態}}/// <summary>/// 刪除圖片事件/// </summary>public event DeleteImage onDeleteImage;}/// <summary>/// 刪除圖片的委托/// </summary>/// <param name="imgid"></param>public delegate void DeleteImage(string imgid);

　　

轉載于:https://www.cnblogs.com/mangoit/p/3296245.html

總結

以上是生活随笔為你收集整理的WinFrm程序使用的图片展示控件.带删除的的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。