贴出来控件页面的代码.
PicList.ascx
复制代码 代码如下:
<%@ Control Language="C#" AutoEventWireup="true" CodeFile="PicList.ascx.cs" Inherits="WebParts_PicList" %>
*
{
margin: 0;
padding: 0;
word-break: break-all;
}
body
{
background: #fff;
color: #000000;
font: 12px/1.6em Helvetica, Arial, sans-serif;
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
h1, h2, h3, h4, h5, h6
{
font-size: 1em;
}
a
{
color: #0287CA;
text-decoration: none;
}
a:hover
{
text-decoration: underline;
}
ul, li
{
list-style: none;
}
fieldset, img
{
border: none;
}
legend
{
display: none;
}
em, strong, cite, th
{
font-style: normal;
font-weight: normal;
}
input, textarea, select, button
{
font: 12px Helvetica, Arial, sans-serif;
}
table
{
border-collapse: collapse;
}
html
{
overflow: -moz-scrollbars-vertical;
}
#ifocus
{
width: 650px;
height: 245px;
margin: 0px;
border: 1px solid #DEDEDE;
background: #F8F8F8;
}
#ifocus_pic
{
display: inline;
position: relative;
float: left;
width: 540px;
height: 225px;
overflow: hidden;
margin: 10px 0 0 10px;
}
#ifocus_piclist
{
position: absolute;
}
#ifocus_piclist li
{
width: 550px;
height: 225px;
overflow: hidden;
}
#ifocus_piclist img
{
width: 550px;
height: 225px;
}
#ifocus_btn
{
display: inline;
float: right;
width: 91px;
margin: 9px 9px 0 0;
}
#ifocus_btn li
{
width: 91px;
height: 57px;
cursor: pointer;
opacity: 0.5;
-moz-opacity: 0.5;
filter: alpha(opacity=50);
}
#ifocus_btn img
{
width: 75px;
height: 45px;
margin: 7px 0 0 11px;
}
#ifocus_btn .current
{
background: url(img/ifocus_btn_bg.gif) no-repeat;
opacity: 1;
-moz-opacity: 1;
filter: alpha(opacity=100);
}
#ifocus_opdiv
{
position: absolute;
left: 0;
bottom: 0;
width: 545px;
height: 35px;
background: #000;
opacity: 0.5;
-moz-opacity: 0.5;
filter: alpha(opacity=50);
}
#ifocus_tx
{
position: absolute;
left: 8px;
bottom: 8px;
color: #FFF;
}
#ifocus_tx .normal
{
display: none;
}
下面是控件后台和一个图片类的代码:
复制代码 代码如下:
public partial class WebParts_PicList : System.Web.UI.UserControl
{
protected void Page_Load(object sender, EventArgs e)
{
ShowImages();
}
public void ShowImages()
{
for (int i = 0; i < ListImages.Count; i++)
{
//标题和小图
if (i == 0)
{
urImgTitle.InnerHtml += "
ulImgSmall.InnerHtml += "";
}
else
{
urImgTitle.InnerHtml += "
ulImgSmall.InnerHtml += "";
}
//大图
ulImgBig.InnerHtml += " ";
}
}
private List
public List
{
get { return listImages; }
set { listImages = value; }
}
}
//图片的属性
public class ShowImages
{
string ImageSrc;
string ImageHref;
string ImageTitle;
string ImageAlt;
public string ImageAlt1
{
get { return ImageAlt; }
set { ImageAlt = value; }
}
public string ImageSrc1
{
get { return ImageSrc; }
set { ImageSrc = value; }
}
public string ImageHref1
{
get { return ImageHref; }
set { ImageHref = value; }
}
public string ImageTitle1
{
get { return ImageTitle; }
set { ImageTitle = value; }
}
}
实现思路是 ShowImages的集合当作控件的一个属性.然后便利集合循环赋值.
下面是页面调用的代码:
复制代码 代码如下:
List
ShowImages image1 = new ShowImages();
image1.ImageAlt1 = "喵喵";
image1.ImageHref1 = "https://www.jb51.net";
image1.ImageSrc1 = "http://b23.photo.store.qq.com/http_imgload.cgi?/rurl4_b=e52b4cc5fe67c1a2dc328adb766f1633bfc02bb27fe17aa21ca1264a0dac599fc425faf65d1daac8ab7cb5923a15443882d9d0586694a0e5eb0671af60a2f6e739d3c15b1e52f2c518a00344fa791dbaee88cc43&a=25&b=23";
image1.ImageTitle1 = "这是我的自画像";
listImages.Add(image1);
listImages.Add(image2);
listImages.Add(image3);
listImages.Add(image4);
PicList1.ListImages = listImages;
ok 一个简单的控件就实现了
作者：cnblogs 喵喵
