Show list items through ECMAScript and jQuery

1) Create an announcement list named "Announcements"

2) Create some items in the list and set some of the items Expires date to today and some to a nother date.

2) Through SharePoint deisnger create a new page layout.

3) Add this code to the page

<%@ Page language="C#" Inherits="Microsoft.SharePoint.Publishing.PublishingLayoutPage,Microsoft.SharePoint.Publishing,Version=14.0.0.0,Culture=neutral,PublicKeyToken=71e9bce111e9429c" meta:progid="SharePoint.WebPartPage.Document" meta:webpartpageexpansion="full" %>
<%@ Register Tagprefix="SharePointWebControls" Namespace="Microsoft.SharePoint.WebControls" Assembly="Microsoft.SharePoint, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %> <%@ Register Tagprefix="WebPartPages" Namespace="Microsoft.SharePoint.WebPartPages" Assembly="Microsoft.SharePoint, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %> <%@ Register Tagprefix="PublishingWebControls" Namespace="Microsoft.SharePoint.Publishing.WebControls" Assembly="Microsoft.SharePoint.Publishing, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %> <%@ Register Tagprefix="PublishingNavigation" Namespace="Microsoft.SharePoint.Publishing.Navigation" Assembly="Microsoft.SharePoint.Publishing, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>

<asp:Content ContentPlaceholderID="PlaceHolderPageTitle" runat="server">
<SharePointWebControls:FieldValue id="PageTitle" FieldName="Title" runat="server"/>
</asp:Content>
<asp:Content ContentPlaceHolderID="PlaceHolderAdditionalPageHead" runat="server">
<SharePointWebControls:ScriptLink Name="SP.debug.js" runat="server" OnDemand="true" Localizable="false"/>
<script src="http://ajax.Microsoft.com/ajax/jQuery/jquery-1.4.2.min.js%22 type="text/javascript"></script>
<script type="text/javascript">

function GetAnnoucmentItems()
{
var clientContext = new SP.ClientContext.get_current();
var web = clientContext.get_web();
var annoucmentlist = web.get_lists().getByTitle("Announcements");
var camlQuery = new SP.CamlQuery();
var camlString = '<View><Query><Where><Eq><FieldRef Name="Expires" /><Value Type="DateTime"><Today /></Value></Eq></Where></Query><RowLimit>100</RowLimit></View>'
camlQuery.set_viewXml(camlString);

this.listItems = annoucmentlist.getItems(camlQuery);

clientContext.load(this.listItems,'Include(Title, Body)');
clientContext.executeQueryAsync(Function.createDelegate(this, this.onQuerySucceeded),
Function.createDelegate(this, this.onQueryFailed));
}
function onQuerySucceeded()
{
var listItemEnumerator = this.listItems.getEnumerator();
this.listCount = this.listItems.get_count()-1;
if(this.listItems.get_count() != 0)
{
ShowAnnouncement(0);
}

}
function onQueryFailed(sender, args)
{
alert('faild');
}
function ShowAnnouncement(index)
{
if(index != 0)
{
$("#text").hide();
}
$("#text").fadeIn("slow");
var htmlString = this.listItems.get_item(index).get_item("Title") + "<br />" + this.listItems.get_item(index).get_item("Body")
$("#text").html(htmlString);
if(index < this.listCount)
{
++index
setTimeout("ShowAnnouncement(" + index + ")",3000);
}
else
{
setTimeout("ShowAnnouncement(0)",3000);
}
}
</script>
</asp:Content>
<asp:Content ContentPlaceholderID="PlaceHolderMain" runat="server">
<script type="text/javascript">
ExecuteOrDelayUntilScriptLoaded(GetAnnoucmentItems, "sp.js");
</script>
<div id="text" />
</asp:Content>

4) Create a new page based on the page layout.

5) And wola.