Hướng dẫn làm Slide từ XML và Jquery

#slider {
    width: 410px; /* important to be same as image width */
    height: 300px; /* important to be same as image height */
    position: relative; /* important */
    overflow: hidden; /* important */
}

body
{
    font-family:Arial, Times New Roman, Tahoma;
    font-size:10px;
}

#sliderContent {
    width: 720px;
    position: absolute;
    top: 0;
    margin-left: 0;
}


.sliderImage {
    float: left;
    position: relative;
    display: none;
}

.sliderImage span {
    position: absolute;
    padding: 10px 13px;
    width: 384px;
    background-color: #000;
    filter: alpha(opacity=70);
    -moz-opacity: 0.7;
    -khtml-opacity: 0.7;
    opacity: 0.7;
    color: #fff;
    display: none;
}

.clear {
    clear: both;
}

.top {
    top: 0;
    left: 0;
}
.bottom {
    bottom: 0;
    left: 0;
}
.left {
    top: 0;
    left: 0;
    width: 110px !important;
    height: 280px;
}
.right {
    right: 0;
    bottom: 0;
    width: 90px !important;
    height: 290px;
}


.cssTitle
{
    font-size:16px;
    line-height:normal;
}


.cssTitle a
{
    text-decoration:none;
    color:#fff;
}

.cssTitle a:hover
{
    text-decoration:underline;
}

<newslist>
  <news>
    <title>Obama chần chừ khi hôn nữ sinh Pháp </title>
    <desc>Tổng thống Mỹ Barack Obama chỉ chìa má cho một nữ sinh hôn sau khi được người đồng nhiệm Pháp khích lệ.</desc>
    <link>/</link>
    <imgurl>/img/1.jpg</imgurl>
  </news>
  <news>
    <title>Thảm họa động đất nhìn từ trên cao </title>
    <desc>Hàng nghìn ngôi nhà cổ ở thành phố L'Aquila, miền trung Italy, biến thành đống đổ nát sau cơn địa chấn kinh hoàng xảy ra hồi đầu tuần khiến hơn 200 người chết. Động đất tại Italy</desc>
    <link>/</link>
    <imgurl>/img/2.jpg</imgurl>
  </news>
  <news>
    <title>Israel thử hệ thống đánh chặn tên lửa Iran </title>
    <desc>
      Hàng nghìn ngôi nhà cổ ở thành phố L'Aquila, miền trung Italy, biến thành đống đổ nát sau cơn địa chấn kinh hoàng xảy ra hồi đầu tuần khiến hơn 200 người chết.
      > Động đất tại Italy
    </desc>
    <link>/</link>
    <imgurl>/img/3.jpg</imgurl>
  </news>
  <news>
    <title>Israel thử hệ thống đánh chặn tên lửa Iran </title>
    <desc>
      Hàng nghìn ngôi nhà cổ ở thành phố L'Aquila, miền trung Italy, biến thành đống đổ nát sau cơn địa chấn kinh hoàng xảy ra hồi đầu tuần khiến hơn 200 người chết.
      > Động đất tại Italy
    </desc>
    <link>/</link>
    <imgurl>/img/4.jpg</imgurl>
  </news>
  <news>
    <title>Israel thử hệ thống đánh chặn tên lửa Iran </title>
    <desc>
      Hàng nghìn ngôi nhà cổ ở thành phố L'Aquila, miền trung Italy, biến thành đống đổ nát sau cơn địa chấn kinh hoàng xảy ra hồi đầu tuần khiến hơn 200 người chết.
      > Động đất tại Italy
    </desc>
    <link>/</link>
    <imgurl>/img/5.jpg</imgurl>
  </news>
  
</newslist>

<?xml version="1.0" encoding="UTF-8" ?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
  <xsl:output method="html"/>
  
  <xsl:template match="/newslist">
    <div id="slider">
      <ul id="sliderContent">
        <xsl:apply-templates select="news"></xsl:apply-templates>
        <div class="clear sliderImage"></div>
      </ul>
    </div>
  </xsl:template>

  <xsl:template match="news">
    <li style="display: none;" class="sliderImage">
      <img width="410" height="300"><xsl:attribute name="src"><xsl:value-of select="imgurl"/></xsl:attribute></img>
      <span style="display: none;">
        <xsl:if test="position()=1"><xsl:attribute name="class">top</xsl:attribute></xsl:if>
        <xsl:if test="position()=2"><xsl:attribute name="class">left</xsl:attribute></xsl:if>
        <xsl:if test="position()=3"><xsl:attribute name="class">bottom</xsl:attribute></xsl:if>
        <xsl:if test="position()=4"><xsl:attribute name="class">right</xsl:attribute></xsl:if>
        <h1 class="cssTitle">
          <a>
            <xsl:attribute name="href"><xsl:value-of select="link"/></xsl:attribute>
            <xsl:value-of select="title"/>
          </a>
        </h1>
        <xsl:value-of select="desc"/>
      </span>
    </li>
  </xsl:template>
</xsl:stylesheet>

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="s3Slide._Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Slide - DOTNET GROUP</title>
    <link href="default.css" rel="stylesheet" type="text/css" media="screen">
    <script type="text/javascript" src="/js/jquery.js"></script>
    <script type="text/javascript" src="/js/s3Slider.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            $('#slider').s3Slider({
                timeOut: 4000
            });
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <asp:Xml ID="xmlTrans" runat="server"></asp:Xml>
    </form>
</body>
</html>

using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;

using System.Xml;
using System.Xml.Xsl;

namespace s3Slide
{
    public partial class _Default : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            XmlDocument doc = new XmlDocument();
            doc.Load(Server.MapPath("/contents.xml"));

            XslTransform trans = new XslTransform();
            trans.Load(Server.MapPath("/slide.xsl"));

            xmlTrans.Document = doc;
            xmlTrans.Transform = trans;
            xmlTrans.DataBind();
        }
    }
}