前几天看到有人需要一个首页轮转显示图片库中图片的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文件。
请高手指点,呵呵,一起讨论。
文件名:静态页面显示效果
描述: 静态页面显示效果
下载地址: