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
本文版权归 霖雨和博客园共有，欢迎转载，但请注明出处。