Ajax no refresh to achieve picture switching effects

First, Ajaxmethod
Using System;
Using System.Data;
Using System.Data.SqlClient;

Namespace Ajaximage
{
/**////<summary>
Summary description of the Ajaxmethod.
</summary>
public class Ajaxmethod
{
Public Ajaxmethod ()
{
}
public static string ConnectionString = system.configuration.configurationsettings.appsettings["ConnectionString"]. ToString ();

Getdataset#region GetDataSet
public static DataSet GetDataSet (String sql)
{
SqlDataAdapter SDA = new SqlDataAdapter (SQL, ConnectionString);
DataSet ds = new DataSet ();
Sda. Fill (DS);
if (ds!= null)
return DS;
Else
return null;
}
#endregion

[Ajaxpro.ajaxmethod]
public static DataSet getphotolist (int Icategoryid)
{
String sql = "Select Id,photo_path from photo where photo_category_id=" + Icategoryid;
return getdataset (SQL);
}
[Ajaxpro.ajaxmethod]
public static DataSet getphotoinfo (int id)
{
String sql = string. Format ("Select Photo_title, photo_description from photo WHERE id = {0}", id);
return getdataset (SQL);
}

}//end class
}

Second, page HTML code:
<div id= "Layer1" style= "z-index:1; left:104px; width:501px; Position:absolute; top:28px; height:345px ">

</div>
<div id= "Layer2" style= "Z-INDEX:2; left:490px; width:112px; Position:absolute; top:380px; Height:26px ">
onmouseout= "this.src= ' Images/play_bw.gif" "> onmouseout= "this.src= ' Images/pause_bw.gif" "> onmouseout= "this.src= ' Images/prev_bw.gif" "> onmouseout= "this.src= ' Images/next_bw.gif '" >
</div>
Third, javascript:
<script language= "javascript" type= "Text/javascript" >
Timer
var Timedelay;

Time interval when the picture is automatically browsed
var timeinterval = 4000;

Array object that stores the path to a picture file
var image;

The number of the picture currently displayed
var num;

Picture Information Data Sheet
var dt;
Pre-loading picture information
function Preloadimage (Icategoryid)
{
Get information about a picture using a synchronous call

var ds = AjaxImage.AjaxMethod.GetPhotoList (Icategoryid). value;

If the result is returned
if (DS)
{
To determine whether a datasheet is not empty
if (ds. Tables[0]. Rows.length > 0)
{
The returned picture information datasheet
DT = ds. Tables[0];

To store a picture's file path with an Image object
Image = new Array ();

The picture is in the photos directory
for (var i = 0; i < dt.) Rows.length; i++)
{
Image[i] = "photos/" + dt. Rows[i].photo_path;
}

Imagepreload object is used to implement the pre-caching of pictures

var imagepreload = new Array ();
for (var i = 0;i < image.length;i++)
{
By creating a new image object and pointing its src attribute to the URL of the picture
Show pre-cache of pictures
Imagepreload[i] = new Image ();
IMAGEPRELOAD[I].SRC = Image[i];
}

Initialize some of the variables
num =-1;
Nstatus = 0x09;

Load First picture
Next_image ();
}
else//No picture under category
{
Alert ("There is no picture under this directory!") ");
}

}
}
Realize the effect of picture switching
function Image_effects ()
{
The transition value is a random number between 0~23, representing 24 switching effects
The correspondence between the concrete value and the effect see MSDN
Document.slideShow.filters.revealTrans.Transition = Math.random () * 23;

Apply and play a toggle effect
Document.slideShow.filters.revealTrans.apply ();
Document.slideShow.filters.revealTrans.play ();
}
function Next_image ()
{
The sequence number of the current picture moves backwards, if it's the last one,
Then switch to the first picture
num++;
Num%= image.length;

The transition effect of a picture
Image_effects ();

Set the Src property of the object to the path of the current num
Toggle the display of pictures
DOCUMENT.SLIDESHOW.SRC = Image[num];
}

function Previous_image ()
{
The sequence number of the current picture moves backwards, if it's the last one,
Then switch to the first picture
num + + image.length-1;
Num%= image.length;

The transition effect of a picture
Image_effects ();

Set the Src property of the object to the path of the current num
Toggle the display of pictures