SharePoint 2010 实现幻灯片播放效果

该实例演示如何获取l列表或者图片库的数据并实现图片自动播放效果，显示所有的在指定视图中的记录。

你可以自定义自动播放图片webpart的大小，显示方向，边框样式，背景色，背景图片，播放间隔，和图片显示时间。最下方已列出所有可配置项。

你能在一个页面上加入多个自动播放图片的webpart，他们之间不会相互影响。

已成功在IE8, Firefox 3.6.13, Safari 5.0.3 and Chrome 9.0.597.98测试，并兼容SharePoint 2007 and 2010.

示例截图

当鼠标移动到webpart上暂停自动播放

工具栏：

左侧的按钮提供指定list的功能

中间有前一张图片，恢复播放，后一张图片的按钮。

配置项:

listGuid: The GUID of the list you will pull information from – see below for instructions getting this GUID
listBaseUrl: The base URL (site URL, not list URL) of the site containing the list to pull from
listViewGuid: The GUID of the view you will pull information from – see below for instructions getting this GUID
viewFields: An array of all the fields you want to include – using FieldInternalName
viewFieldsStyle: An array that corresponds with the above array. Used to set an individual CSS style of the value
imageMax: Object literal with the parameters “height” and “width”. This represents the max-height OR the max-width of images that are either pulled from a picture library, or from a hyperlink field configured as “Image”. This does NOT apply to images embedded in a rich text field. Use only one parameter at the time to keep the image aspect ratio. The one not specified should have the value null
containerID: A unique ID (unique in the current page) for the slideshow container.
containerHeight: Height in pixles
containerWidth: Width in pixles
containerBorderStyle: CSS style for the border of the container
containerBgColor: Background color of the container
containerBgImg: Background image to use for the container
inDir: The direction to scroll in the content (n,nv,ne,s,sv,se,v,e)
outDir: The direction to scroll out the content (n,nv,ne,s,sv,se,v,e or fade)
displayTime: How long to display each slide – in milliseconds
slideTime: The slide time – in milliseconds
readMoreLink: true or false
readMoreText: If the above parameter is true – the text or image to click to go to DispForm for the specific item
addNewLink: true or false
addNewText: If the above parameter is true – the text or image to click to add a new item to the list
emptyCaution: If the list view contains no items – this is the text displayed in the first (and only) slide

如何找到listGuid, viewGuid 和 FieldInternalName:

Go to the list view that will provide the input for your scrolling web part. Right click somewhere in the list view webpart and select “view source”. Search for“ctx.listname”, and you will find something like this:

ctx.listName = “{A4B4E15A-C5B0-47BC-A08B-739CD48FE58A}”;
ctx.view = “{B83E87C1-D25A-47DE-8196-A0A12DB89106}”;

The value for “ctx.listName” is used as “listGuid”, and the value for “ctx.view” is used as “listViewGuid” in the configuration.

To find the FieldInternalName of your field, go to DispForm on any element in the list, right click and select “view source”. You find the FieldInternalNames by searching for the “FieldName” (the display name) of your field. The FieldInternalName is found like this:

 
          1 
          <!-- FieldName="My new field" 
         
          2 
              FieldInternalName="My_x0020_new_x0020_field" 
         
          3 
              FieldType="SPFieldText" 
         
          4 
          -->

The code

Download the code for the file “SlideshowForSharePoint.js” here

确保将代码保存在文档库中或者专门用于储存脚本的列表中。并确认所有用户都有权限浏览。

将如下脚本放入你需要显示的幻灯片的地方。

 
          01 
          <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>  
         
          02 
          <script type="text/javascript" src="/test/English/Javascript/SlideshowForSharePoint/SlideshowForSharePoint.js"></script>  
         
          03 
          <script type="text/javascript">  
         
          04 
             
          05 
          var myScrSettings = {'listGuid':'A4B4E15A-C5B0-47BC-A08B-739CD48FE58A',  
         
          06 
              'listBaseUrl':'/test/English',  
         
          07 
              'listViewGuid':'5BD378F4-25D5-4880-9C5B-1667FE43978D',  
         
          08 
              'viewFields':['Title','MultiLine','Image'],   
         
          09 
              'viewFieldsStyle':['padding:5px;font-size:16px','padding:5px;font-style:italic','text-align:center'],  
         
          10 
              'imageMax':{height:150,width:null},  
         
          11 
              'containerID':'myScrollableDiv',  
         
          12 
              'containerHeight':270,  
         
          13 
              'containerWidth':500,  
         
          14 
              'containerBorderStyle':'border:6px silver double',  
         
          15 
              'containerBgColor':'#CAE1FF',  
         
          16 
              'containerBgImg':'/test/English/Javascript/SlideshowForSharePoint/bgImg6.png',  
         
          17 
              'inDir':'e',  
         
          18 
              'outDir':'v',  
         
          19 
              'displayTime':3000,  
         
          20 
              'slideTime':1500,  
         
          21 
              'readMoreLink':true,  
         
          22 
              'readMoreText':"<img title='Go to item' src='/_layouts/images/magnify.gif' border='0'>",  
         
          23 
              'addNewLink':true,  
         
          24 
              'addNewText':"<img title='Add new item' src='/_layouts/images/newitem.gif' border='0'>",  
         
          25 
              'emptyCaution':"<div style='height:100%;width:100%;padding-top:140px;text-align:center'>There are no items to show here..."};  
         
          26 
                 
          27 
          init_fillScrollableDiv(myScrSettings);  
         
          28 
          </script> 
         
        需要自定义改变 
        listGuid, listViewGuid, viewFields 和script src到你SlideshowForSharePoint.js的存放路径。 
      
       参考资料：https://www.nothingbutsharepoint.com/sites/eusp/Pages/Slideshow-for-SharePoint.aspx