Ajax no refresh to achieve picture switching effects

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:


&lt;div id= "Layer1" style= "z-index:1"; left:104px; width:501px; Position:absolute; top:28px; height:345px "&gt;


&lt;img name= "slideshow" src= "/uploadpic/2007-4/200741123149194.gif" width= "height=" "style=" Filter:revealtrans (duration=2,transition=23) "&gt;


&lt;/div&gt;


&lt;div id= "Layer2" style= "Z-index:2"; left:490px; width:112px; Position:absolute; top:380px; Height:26px "&gt;


&lt;img id= "Btnplay" src= "/uploadpic/2007-4/200741123150757.gif"


&gt; &lt;img id= "btnpause" src= "/uploadpic/2007-4/200741123150400.gif"


&gt; &lt;img id= "Btnprev" src= "/uploadpic/2007-4/200741123155576.gif"


&gt; &lt;img id= "btnnext" src= "/uploadpic/2007-4/20074112326498.gif"


&gt;


&lt;/div&gt;


three, javascript:


&lt;script language= "javascript" type= "Text/javascript" &gt;


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 &gt; 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 &lt; 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 &lt; 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 &lt;img&gt; 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 &lt;img&gt; 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 &lt;img&gt; 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);


            }


&lt;/script&gt;


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