ASP.NET 控件开发系列之图片切换web控件(2)


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 += "<li>" + listImages[i].ImageTitle1 + "</li>";
ulImgSmall.InnerHtml += "<li><img src='" + listImages[i].ImageSrc1 + "' alt='" + listImages[i].ImageAlt1 + "' /></li>";
}
else
{
urImgTitle.InnerHtml += "<li>" + listImages[i].ImageTitle1 + "</li>";
ulImgSmall.InnerHtml += "<li><img src='" + listImages[i].ImageSrc1 + "' alt='" + listImages[i].ImageAlt1 + "' /></li>";
}
//大图
ulImgBig.InnerHtml += " <li><a href=" + listImages[i].ImageHref1 + " target='_blank'><img src=" + listImages[i].ImageSrc1 + " alt=" + listImages[i].ImageAlt1 + " /></a></li>";
}
}
private List<ShowImages> listImages;
public List<ShowImages> ListImages
{
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> listImages = new List<ShowImages>();
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;

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wjjjpg.html