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

查看本栏目更多精彩内容:http://www.bianceng.cnhttp://www.bianceng.cn/web/sharepoint/

时间: 2024-08-04 07:06:46

SharePoint页面定制:实现门户网站的图片轮播的相关文章

SharePoint 门户网站的图片轮播-页面定制

这个想法是自己突然的一个想法,想想我们经常用SharePoint做门户网站,不知道你们多数项目都是怎么完成的,我们客户要求的效果都还是很严格的,所有展现起来,还是很漂亮的,但是很多时候的效果,还是难以展现,实在让人头疼.好在SharePoint还给我们提供了对象模型,我们可以使用web部件来完成展现,不过这不是我们今天的主题,web部件的基本功要求比较高,尤其编程能力,我的编程不好,大学学的C++就不好,自学的asp.net更加一知半解,好了,废话又多了,大家不要见怪啊!我们今天要做的,是通过j

js制作网站首页图片轮播特效代码_javascript技巧

本文实例为大家分享了使用js制作一般网站首页图片轮播效果的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>图片轮播</title> <style> .warp{ width: 600px; height: 750px; position: relative;

JS仿hao123导航页面图片轮播效果_javascript技巧

hao123网站大家都很熟悉吧,具体的效果不用我多说吧,感兴趣的朋友可以去参考效果图,下面小编给大家分享下实现代码思路,当然大家可以根据需求适当的添加修改删除代码. 关键代码如下所示: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>图片轮播</title> <style> .warp{ wi

json-Android 实现图片轮播点击跳转页面

问题描述 Android 实现图片轮播点击跳转页面 现在图片轮播是有 但是怎么把图片对应的链接传递给跳转的webview 图片链接 跟 图片 都是json解析出来的 求大神给个思路 !! 解决方案 轮播图是一个list集合转载的吧,点击轮播图的时候获取相应的链接,然后intent到相应的webview页面就ok了 解决方案二: 轮播的图片对应的集合里的id,根据id跳转到相应的页面 然后把相应的链接地址传过去 解决方案三: 图片伦播使用的控件好像是padgeview(还是viewpadge,不太

asp.net中上传图片并将图片在网站首页的轮播中显示,怎么实现?

问题描述 我在做一个网站带后台的,首页有图片轮播,是用JS做的,但是这些图片是固定的,现在想实现不固定图片的轮播,就是把上传的图片放到首页的图片轮播里,哪位大侠懂得帮帮忙,非常感谢! 解决方案 解决方案二:图片路径别写死,从数据库读不就好了一次性读出来,存到个数组里,然后随机索引解决方案三:那就修改那前台那些图片的路径咯.我有个馊主意,就是你把图片改成同个名字,传到现有的图片那儿.解决方案四:如果你前后台在一起,那么非常简单,就是后台上传到特定目录下,前台用js读取这个目录的图片如果你前后台不在

JavaScript实现带标题的图片轮播特效

  这里给大家分享的是4屏带标题和文字描述的js图片轮播代码,完美兼容IE6.图片滚动切换,鼠标放到数字选项卡即可切换图片.点击图片跳转到指定页面,有需要的小伙伴可以参考下. 图片轮播,在一些购物网站上运用的不胜枚举,下面简单介绍一下图片轮播的实现. 如图 CSS代码: ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 4

[译] 别再使用图片轮播了

本文讲的是[译] 别再使用图片轮播了, 原文地址:Don't Use Automatic Image Sliders or Carousels 原文作者:Peep Laja 译文出自:掘金翻译计划 本文永久链接:github.com/xitu/gold-m- 译者:shawnchenxmu 校对者:laiyun90 thisisandy 别再使用图片轮播了 Don't Use Automatic Image Sliders or Carousels 图片轮播,或者旋转木马(也叫做「rotatin

非常酷炫的Bootstrap图片轮播动画_javascript技巧

对于网站开发者来说,对展示内容增加一个滑动或者是轮播效果的是非常常见的需求.收费和免费的轮播插件多的是不胜枚举.其中很 多提供很多有用的配置选项和动态效果. 很多时候,如果你的项目需要的是一个轻量级的轮播,不需要很多的功能.同时你的项目是采用Bootstrap,(一个最流行的开源前端 框架)的话.你可以参考一下bootstrap官方组件. 这篇文章将展示如何在 Bootstrap轮播上添加有趣的动画效果.同时确保这个js组件自由扩展和快速上手. 介绍Animate.css 为了让我自己写的动画效

12款经典的白富美型—jquery图片轮播插件—前端开发必备_jquery

图片轮播是网站中的常用功能,用于在有限的网页空间内展示一组产品图片或者照片,同时还有非常吸引人的动画效果.本文向大家推荐12款实用的 jQuery 图片轮播效果插件,帮助你在你的项目中加入一些效果精美的图片轮播效果,希望这些插件能够帮助到你. Nivo Slider 首先推荐的这款插件号称世界上最棒的图片轮播插件,有独立的 jQuery 插件和 WordPress 插件两个版本. 目前下载量已经突破 1,800,000 次!jQuery 独立版本的插件主要有如下特色: ✓  16个独特的过渡效果