SharePoint門戶網站的圖片輪播-頁面定製

這個想法是自己突然的一個想法，想想我們經常用SharePoint做門戶網站，不知道你們多數項目都是怎麼完成的，我們客戶要求的效果都還是很嚴格的，所有展現起來，還是很漂亮的，但是很多時候的效果，還是難以展現，實在讓人頭疼。好在SharePoint還給我們提供了物件模型，我們可以使用web組件來完成展現，不過這不是我們今天的主題，web組件的基本功要求比較高，尤其編程能力，我的編程不好，大學學的C++就不好，自學的asp.net更加一知半解，好了，廢話又多了，大家不要見怪啊！我們今天要做的，是通過js指令碼來實現圖片輪播，看看新浪首頁的圖片輪播吧，還是可以的，我們呢就用一段js實現，好了，廢話不說了，開始動手去做！Come on！！

1、還記得上次我們討論的SharePoint四個定製頁嗎？！什麼。。不記得了，自己回去找找。。

http://www.cnblogs.com/jianyus/archive/2011/10/13/2210977.html

大家參考一下AllItems頁得定製，這個我就不多說了，看看，所有的圖片都在上面，我們讓它動起來！

2、想想js輪播至少需要src，貌似也只需要src，好了，問題就在這，圖片都在這了，我們怎麼讓他輪播呢？！好吧，不賣關子了，就是簡單的

document.getElementById("").src;//js語句

這樣的js語句就行了，然後我嫩需要做的就是雙引號裡面的ID了，對吧。好，開動腦筋，怎麼擷取這個ID，經過很長時間的思考，多張時間呢？！我也不記得了。。反正很長！其實，頁面上顯示的是四張圖片，每張圖片都是有xsl語句迴圈出來的，我們要做的，就是在img標籤上，添加一個ID的屬性。

<img  src="{@_x76f8__x7247_}" width="95" height="140"/>

就像昨天的img標籤，還記得嗎？！在id上加上 id="p{@ID}" 就是<img id="p{@ID}" src="{@_x76f8__x7247_}" width="95" height="140"/>

我用js alert了一下document.getElementById("p1").src;，確實是圖片的路徑，沒有問題。好了，第一張圖片是p1，第二張是p2...類推

3、相信得到這個結果了，大家的js實現圖片輪播也就馬山可以做了！好了，大家試試看吧。不管你信不信，反正我是信了。下面是我測試的圖片輪播，哎，我的樣式太差了，好吧，這不是重點。

ps：話說我的水平有限，大家覺得簡單不要見笑啊，就是給大家提供一個不同的思路，我的理念是將定製進行到底！拒絕代碼！

 

作者：霖雨
出處：http://www.cnblogs.com/jianyus
本文著作權歸 霖雨和部落格園共有，歡迎轉載，但請註明出處。