·您现在的位置：云翼网络 >> 文章中心 >> 网站建设 >> 网站建设开发 >> ASP.NET网站开发 >> ASP.NET控件开发系列之图片切换web控件

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

作者：佚名 ASP.NET网站开发编辑：admin 更新时间：2022-07-23

刚开始学习asp.net控件开发,写了一个web图片切换控件,欢迎大家拍砖.

贴出来控件页面的代码.

PicList.ascx
<%@ Control Language="C#" AutoEventWireup="true" CodeFile="PicList.ascx.cs" Inherits="WebParts_PicList" %>
<style type="text/CSS">
    /* Reset style */
    *
    {
        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;
    }
    /*Always show Firefox scrollbar*/
    /* iFocus style */
    #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;
    }
</style>

下面是控件后台和一个图片类的代码:

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 class='current'>" + listImages[i].ImageTitle1 + "</li>";
                ulImgSmall.InnerHtml += "<li class='current'><img src='" + listImages[i].ImageSrc1 + "' alt='" + listImages[i].ImageAlt1 + "' /></li>";
            }
            else
            {
                urImgTitle.InnerHtml += "<li class='normal'>" + listImages[i].ImageTitle1 + "</li>";
                ulImgSmall.InnerHtml += "<li class='normal'><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 + " border='0' /></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 = "http://qixuejia.cnblogs.com";
        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 一个简单的控件就实现了

http://www.cnblogs.com/qixuejia/archive/2010/04/24/AspNet-Control-ListImg.html

上一篇文章：在ASP.NET 使用WebDAV访问Outlook的日历
下一篇文章： Asp.Net 性能 ViewState 压缩的2种方法

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

网站建设问答

网站建设开发

网站需求分析