MOSS首页轮转显示图片库中图片

前几天看到有人需要一个首页轮转显示图片库中图片的webpart,这应该是一个比较通用的需求,我利用周末时间搞了一个比较简单的,是一个自定义控件(个人观点,在首页上尽量不用webpart,慢~~~),具体的部署过程大家应该很清楚了,效果和脚本参考的是http://www.qpch.com/上的一个示例, 我做了一下包装,暴露出一个Imageurl的属性,是图片库的路径,详细可见下面的代码。
    附件是静态页面效果,控件的整个源代码项目文件(dll与脚本文件在bin目录下)。  
   
几个主要的点说明一下:
    ImagesUrl属性,图片库的名字,由于我在代码中取的是站点的顶级网站(SPSite.RootWeb),所以请将图片库创建在顶级网站中。
   
    控件其实就是取得图片库的Url,循环向页面灌html,具体生成html的函数为(比较乱,因为我把样式也一并写在了这,偷懒了):
  protected  string GetHtml()
        {
            string imghtml = "";
            string htmlbegin = "<div align='center'><div id='MainPromotionBanner'style='width:360px;height:190px;background:#feb900'><div id='SlidePlayer'style='position:relative;margin:0 auto'><ul class='Slides'>";
            StringBuilder htmlend = new StringBuilder();
            htmlend.Append("</ul></div><script type='text/javascript'>TB.widget.SimpleSlide.decoration('SlidePlayer', {eventType:'mouse', effect:'scroll'});</script></div>");
            htmlend.Append("<style>div#MainPromotionBanner{width:360px;height:190px;background:#feb900;}#MainPromotionBanner #SlidePlayer {position:relative;margin: 0 auto;}#MainPromotionBanner .Slides{padding: 0;margin: 0;list-style: none;height: 190px;overflow: hidden;}#MainPromotionBanner .Slides li {float: left;width: 360px;height: 190px;}#MainPromotionBanner .Slides img{border:0;display: block;width: 360px;height: 190px;}#MainPromotionBanner .SlideTriggers{margin: 0;padding: 0;list-style: none; position: absolute; top: 165px; right: 0px;z-index: 10;height: 25px;}#MainPromotionBanner .SlideTriggers li{float: left;display: inline;color: #74a8ed;text-align: center;line-height:16px;width: 16px;height: 16px;font-family: Arial;font-size: .9em;cursor: pointer;overflow: hidden; margin:3px 6px;background: url(icon/images200712203/slide_trigger.gif) no-repeat center center;}");
            htmlend.Append("#MainPromotionBanner .SlideTriggers li.Current{ color:#fff; background: url(icon/images200712203/slide_trigger_c.gif) no-repeat center center;border:0; font-weight:bold;font-size: 1.4em;line-height: 21px;height: 21px;width: 21px;margin:0 6px;}</style>");

            string htmlattribute = "";
        
            SPSite site = SPControl.GetContextSite(this.Context);
            SPWeb web = site.RootWeb;
            SPList images=web.Lists[ImagesUrl];

            if(images!=null&&images.Items.Count>0)
            {
                for (int i = 0; i < images.Items.Count; i++)
                {
                    htmlattribute = "<li><a target='_blank'><img src='"+web.Url+"/"+ images.Items.Url + "'></a></li>";

                    imghtml += htmlattribute;
                }
            }
            return htmlbegin + imghtml + htmlend.ToString();
        }

另外比较重要的就是一个脚本文件,我包括在控件里边了,详见附件项目中的JScript1.js文件。

请高手指点,呵呵,一起讨论。

文件名:静态页面显示效果

描述: 静态页面显示效果

下载地址:

TestWebControlLibrary.rar

【本文转载自:】http://bbs.winos.cn/thread-33985-1-23.html

posted @ 2009-11-03 17:00  冷月孤星  阅读(785)  评论(0编辑  收藏  举报