JQuery Rotator

http://www.sharepointdiary.com/2012/12/rotating-banner-sharepoint-jquery.html

Rotating Banner for SharePoint using jQuery

With jQuery we can do lot of user interface enhancements in SharePoint. In this article, I'm exploring one of them: Add rotating banner for SharePoint using jQuery, Let our SharePoint site display moving top banner. Lets start building rotating banner for SharePoint!

jQuery Rotating Banner for SharePoint - Steps in Brief:
Here is how to create rotating banner in SharePoint

1. Download and create necessary files
2. Create the folder structure as explained below
3. Create HTM file for banner Rotator. Update the links to point to your SharePoint site for images and JavaScript files in HTM and CSS.
4. Add a Content Editor web part to the page, specify the banner HTM file.

Step 1: Download and create necessary Files
For SharePoint scrolling banner implementation, we need below files:

1. jquery.min.js - Get it from: https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js
2. jquery.cycle.all.js - http://cdn.jsdelivr.net/cycle/2.9999.6/jquery.cycle.all.js
3. A CSS file to define styles for our rotating banner
4. Banner images, and rotator control images (like Previous, Next, switch.)
5. A HTML page which has rotating banner code!

for the last CSS and HTM files, You can refer: http://malsup.com/jquery/cycle/more.html?v2.23

Step 2: Create the Folder Structure
Head on to your SharePoint site, Create a Asset library (or even document library will do!) and create 3 sub folders:

• A Folder for rotating banner scripts, say "scripts"
• A Folder for Images, say "images"
• and a folder for CSS Styles, say "styles"

So, Your Library and folder structure will look like:

Create a HTM and CSS file (You can refer online demos of the provides links)
Create a HTM file and CSS file from the content provided below. 

CSS File Content: say, Slider.css 

HTML File Conent: say, Banner.htm 

Images: (6 Images)

Download and upload these images to your SharePoint Library's images folder.

Step 3: Update the links in HTM and CSS files
Update the Links for Images, JavaScript files in HTM and CSS files.

Here is my scripts folder:

Here is my Images folder:

and the styles folder:

Upload the files to relevant folders.

Add a Content Editor web part to the page, specify the banner html file.

See Rotating banner for SharePoint 2010 using jQuery in action!

Read more: http://www.sharepointdiary.com/2012/12/rotating-banner-sharepoint-jquery.html#ixzz2rQfKWHSE