ajax| Refresh | no refresh
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);
&NBSP;&NBsp; }
}//end class
}
two, page HTML code:
<div id= "Layer1" style= "z-index:1"; left:104px; width:501px; Position:absolute; top:28px; height:345px ">
<img name= "slideshow" src= "/uploadpic/2007-4/200741123149194.gif" width= "height=" "style=" Filter:revealtrans (duration=2,transition=23) ">
</div>
<div id= "Layer2" style= "Z-index:2"; left:490px; width:112px; Position:absolute; top:380px; Height:26px ">
<img id= "Btnplay" src= "/uploadpic/2007-4/200741123150757.gif"
> <img id= "btnpause" src= "/uploadpic/2007-4/200741123150400.gif"
> <img id= "Btnprev" src= "/uploadpic/2007-4/200741123155576.gif"
> <img id= "btnnext" src= "/uploadpic/2007-4/20074112326498.gif"
>
</div>
three, javascript:
<script language= "javascript" type= "Text/javascript" >
Timer
var Timedelay;
//Picture automatic browsing time interval
var timeinterval = 4000;
//Array object that stores the path to the picture file
var image;
//current displayed picture sequence number
var num;
//Picture information datasheet
var dt;
//Pre-loading picture information
function Preloadimage (Icategoryid)
{
///Use synchronous call to get picture information
var ds = AjaxImage.AjaxMethod.GetPhotoList (Icategoryid). value;
//If results are returned
if (DS)
{
//To determine if the datasheet is not empty
if (ds. Tables[0]. Rows.length > 0)
{
//returned picture information datasheet
dt = ds. Tables[0];
//file path for storing pictures with image objects
image = new Array ();
//Picture in 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++)
{
//Creates a new Image object and points its src attribute to the URL of the picture
//Presentation image cache
Imagepreload[i] = new Image ();
imagepreload[i].src = Image[i];
//initialization of some variables
num =-1;
//nstatus = 0x09;
//Load First picture
Next_image ();
}
else//No pictures under category
{
alert ("There is no picture under this directory!") ");
}
}
}
//Realize the effect of picture switching
function image_effects ()
{
The value of
//transition is the random number between 0~23, representing 24 kinds of switching effects
//Specific values and effects of the corresponding see MSDN
Document.slideShow.filters.revealTrans.Transition = Math.random () * 23;
//apply and play the switching 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,
//Switch to the first picture
num++;
num%= image.length;
//Picture switching effect
image_effects ();
Set the Src property of the <img> object to the current num-corresponding path
//Toggle Picture Display
document.slideShow.src = Image[num];
}
function previous_image ()
{
//The serial number of the current picture is moved backwards, if it is the last one,
Then switch to the first picture
num + = image.length-1;
num%= image.length;
//Picture switching effect
image_effects ();
//Set the Src property of the <img> object to the current num-corresponding path
Toggle the display of a picture
document.slideShow.src = Image[num];
}
function slideshow_automatic ()
{
//The serial number of the current picture is moved backwards, if it is the last one,
Then switch to the first picture
num + +;
num%= image.length;
//Picture switching effect
image_effects ();
//Set the Src property of the <img> object to the current num-corresponding path
Toggle the display of a picture
document.slideShow.src = Image[num];
Timedelay = settimeout ("slideshow_automatic ()", timeinterval);
}
//Stop AutoPlay
function pauseslideshow ()
{
Clears the timer and no longer executes the slideshow_automatic function
cleartimeout (Timedelay);
}
</script>
four, in the main page of the OnLoad event add:
Five, webconfig add:
<system.web>
<add verb= "*" path= "*.ashx" type= "Ajaxpro.ajaxhandlerfactory,ajaxpro"/>
<configuration>
<appSettings>
<add key= "ConnectionString" value= "Server=127.0.0.1;database=test;uid=sa;pwd=dfdf"/>
</appSettings>
Vi. Database Scripts:
CREATE TABLE [Photo] (
[ID] [int] IDENTITY (1, 1) not NULL,
[Photo_title] [varchar] (128) COLLATE Chinese_prc_ci_as NULL,
[Photo_description] [Text] COLLATE Chinese_prc_ci_as NULL,
[PHOTO_CATEGORY_ID] [INT] Null
[Photo_path] [varchar] (255) COLLATE Chinese_prc_ci_as NULL
) on [PRIMARY] textimage_on [PRIMARY]
Go
Http://www.cnblogs.com/wander/archive/2006/09/19/508648.html