Ajax no refresh to achieve picture switching effects

Source: Internet
Author: User
Tags add array object sql return string time interval
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







Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.