SharePoint Portal website image carousel-page Customization

This idea is a sudden thought. Think about how we often use SharePoint as a portal website. I don't know how most of your projects are completed. Our customers still have strict requirements on the results, all of them are beautiful, but the results are hard to show in many cases, which is really a headache. Fortunately, Sharepoint also provides us with an object model. We can use Web Components for presentation, but this is not our topic today. The basic skills of Web components are demanding, especially programming capabilities, my programming is not good, and my college C ++ is not good. The self-taught Asp.net is even more knowledgeable. Well, there are more nonsense. Don't be surprised! What we want to do today is to use JS scripts to implement image carousel. Let's take a look at the picture carousel on the Sina homepage. We can still use a piece of js to implement it. Well, I will not talk nonsense, start to do it! Come on !!

1. Do you still remember the four custom SharePoint pages we discussed last time ?! .. Don't remember. Go back and look for it ..

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

Let's just take a look at the customization of the allitems page. Let's just move all the pictures above!

2. Think about the JS carousel. At least SRC is required. It seems that only SRC is required. Well, the problem is that all the images are here. How can we make him carousel ?! Okay, it's simple.

Document. getelementbyid (""). SRC; // JS statement

This JS statement is enough, and what I need to do is the ID in the double quotation marks, right. Okay. Start thinking. How can I get this ID? after a long time of thinking, how can I get this ID ?! I don't remember either .. It's very long! In fact, there are four images displayed on the page, each of which is recycled by an XSL statement. What we need to do is to add an ID attribute on the IMG tag.

Like yesterday's IMG tag, remember ?! Add id = "P {@ ID}" to the ID, that is,

I used JS alert to document. getelementbyid ("p1"). SRC;, which is indeed the image path. Okay, the first image is P1, and the second image is p2.so on.

3. I believe this is the result. Now, you can achieve image Carousel in Js! Okay. Let's try it. Believe it or not, I believe it. Below is the picture carousel I tested. Ah, my style is too bad. Well, this is not the point.

PS: I have a limited level of experience. If you think it is simple, don't laugh. I just want to provide you with a different idea. My idea is to implement customization to the end! RejectCode!

 

Author: Yu
Source: http://www.cnblogs.com/jianyus
The copyright of this article is shared by Yu and the blog Park. You are welcome to reprint it, but please indicate the source.