Here, you will
see how to create a slideshow using an easy slider jQuery plug-in. First of all
start Visual Studio .NET and make a new ASP.NET web site using Visual Studio
2010.
Step1: Your
.aspx page looks like this:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs"
Inherits="_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>Easy Slider jQuery Plugin Demo - ASP.NET</title>
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/easySlider1.5.js" type="text/javascript"></script>
<link href="css/screen.css" rel="stylesheet" type="text/css" />
</head>
<body> <form id="form1" runat="server">
<div id="content" runat="server">
</div>
<script language="javascript" type="text/javascript">
$(document).ready(function () {
$("#slider").easySlider({
auto: true,
continuous: false
});
});
</script>
<style>
#slider
{
}
#slider ul, #slider li
{
margin: 0;
padding: 0;
list-style: none;
}
#slider li
{
width: 696px;
height: 241px;
overflow: hidden;
}
#prevBtn, #nextBtn
{
display: block;
width: 30px;
height: 77px;
position: absolute;
left: -30px;
top: 71px;
}
#nextBtn
{
left: 696px;
}
#prevBtn a, #nextBtn a
{
display: block;
width: 30px;
height: 77px;
background: url(images/btn_prev.gif) no-repeat 0 0; }
#nextBtn a
{
background: url(images/btn_next.gif) no-repeat 0 0;
}
</style>
</form>
</body>
</html>
Step2:
Your .cs page looks like:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.HtmlControls;
using System.IO;
public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
CreateSlider();
}
}
private void CreateSlider()
{
StringWriter stringWriter = new StringWriter();
using (HtmlTextWriter writer = new HtmlTextWriter(stringWriter))
{
writer.AddAttribute(HtmlTextWriterAttribute.Id, "slider");
writer.RenderBeginTag(HtmlTextWriterTag.Div);
writer.RenderBeginTag(HtmlTextWriterTag.Ul);
for (int i = 1; i <= 7; i++)
{
writer.RenderBeginTag(HtmlTextWriterTag.Li);
writer.AddAttribute(HtmlTextWriterAttribute.Href, "#");
writer.RenderBeginTag(HtmlTextWriterTag.A):
string src = "images/"+i.ToString()+".jpg";
writer.AddAttribute(HtmlTextWriterAttribute.Src,src);
writer.RenderBeginTag(HtmlTextWriterTag.Img);
writer.RenderEndTag();
writer.RenderEndTag();
writer.RenderEndTag();
writer.RenderEndTag();
writer.RenderEndTag();
}
content.InnerHtml = stringWriter.ToString();
}
}
