SharePoint Page customization: Implementing a picture Carousel for a portal site

The idea was a sudden thought of myself, think we often use SharePoint as a portal site, do not know how many of your projects are completed, our customer requirements are still very strict, all show up, or very beautiful, but many times the effect, or difficult to show, it is really a headache. Fortunately SharePoint also provided us with the object model, we can use the Web Parts to complete the presentation, but this is not our theme today, Web Parts of the basic requirements of a high, especially programming ability, my programming is not good, the University of C + + is not good, Self-Study of the asp.net more than a smattering of, well, nonsense again, we do not take it amiss Ah! We are going to do today, through the JS script to achieve the picture carousel, look at the picture of Sina home page, or you can, we will use a paragraph of JS to achieve, well, nonsense do not say, start to do! Come on!!

1, remember the last time we discussed the SharePoint four custom page?! What the.. Don't remember, go back and look for it yourself.

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

We refer to AllItems page customization, this I will not say, see, all the pictures are above, we let it move!

2, think of JS Carousel at least need SRC, seemingly also only need SRC, OK, the problem is here, the picture is here, how do we let him round?! Okay, no suspense, it's simple.

document.getElementById (""). Src;//js statement

Such a JS statement on the line, and then I need to do is the double quotes inside the ID, right. Good, the brain, how to get this ID, after a long time to think, more time?! I don't remember either. It's long anyway! In fact, the page shows four pictures, each image is a loop of XSL statements, we have to do is on the IMG tag, add an id attribute.

Just like yesterday's IMG tags, remember?! Adding id= "p{@ID}" to the ID is

I used JS alert for a moment document.getElementById ("P1"). src; the path to the picture, no problem. Well, the first picture is P1, and the second one is P2 ... Analogy

3, believe that this result, everyone's JS implementation picture Carousel can do! All right, let's have a try. Whether you believe it or not, I believe it anyway. Here is my test of the picture carousel, hey, my style is too bad, OK, this is not the point.

PS: Saying that my level is limited, we feel simple don't laugh ah, is to provide you with a different idea, my idea is to be customized to the end! Reject Code!

Author: Lin Yu

Source: Http://www.cnblogs.com/jianyus

See more highlights of this column: http://www.bianceng.cnhttp://www.bianceng.cn/web/sharepoint/