首頁 > 開發者 > ASP

使用ASP.NET AJAX實現(圖片)投影片效果

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

(1)html

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Photo.aspx.cs" Inherits="Photo" %>

<!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></title>
    <script type="text/javascript">
        function pageLoad()
        {
            var img=$get("Image1");
            img.style.visibility="hidden";
            PageMethods.GetSlides(OnSuccess,OnError,OnTimeOut);
        }
               
        function OnSuccess(result)
        {
            slideshow.set_Slides(result);
            slideshow.set_Delay(5000);
            slideshow.ShowImage();
        }
               
        function OnError(result)
        {
            alert(result.get_message());
        }

        function OnTimeOut(result)
        {
            alert(result);
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server" EnablePageMethods="True">
            <Scripts>
                <asp:ScriptReference Path="~/ComJs/slide.js" />
            </Scripts>
        </asp:ScriptManager>
        <img alt="" id="Image1" style="FILTER: blendTrans(duration=1);visibility:hidden" height="300px" width="380px" border="0px" />
        <br />
        <input id="Button1" type="button"  value="1" onclick="slideshow.ShowUserChoose(0)" style="width:100px" />
        <input id="Button2" type="button"  value="2" onclick="slideshow.ShowUserChoose(1)" style="width:100px" />
        <input id="Button3" type="button"  value="3" onclick="slideshow.ShowUserChoose(2)" style="width:100px" />
        <input id="Button4" type="button"  value="4" onclick="slideshow.ShowUserChoose(3)" style="width:100px" />
    </form>
</body>
</html>

(2)aspx.cs

using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
using System.Web.Services;

public partial class Photo : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {

    }

    [WebMethod]
    public static string[] GetSlides()
    {
        string[] strArrSlides = new string[4];
        strArrSlides[0] = "ComImage/01.jpg";
        strArrSlides[1] = "ComImage/02.jpg";
        strArrSlides[2] = "ComImage/03.jpg";
        strArrSlides[3] = "ComImage/04.jpg";
        return strArrSlides;
    }
}

(3)js

//註冊ZHSlide命名空間
Type.registerNamespace("ZHSlide");

//建立一個名為SildeShow的類
ZHSlide.SlideShow=function()
{
    this._slides=new Array();//數組,儲存圖片URL
    this._delay=2000;//間隔時間,單位毫秒
    this._currentIndex=0;//當前圖片在_slides數組中的索引
    this._pause=false;//是否暫停投影片的顯示,(true暫停,false運行)
}

//屬性(理解:不同於cs裡的屬性,這裡是個籠統的概念)
ZHSlide.SlideShow.prototype=
{
    get_Slides:function()
    {
        return this._slides;
    },
   
    set_Slides:function(value)
    {
        this._slides=value;
    },
   
    get_Delay:function()
    {
        return this._delay;
    },
   
    set_Delay:function(value)
    {
        this._delay=value;
    },
   
    get_CurrentIndex:function()
    {
        return this._currentIndex;
    },
   
    //這個屬性首先會檢查傳來的值.
    //如果值超出了_slides數組的範圍,那會它會根據條件進行判斷,設定該值為“0”或數組內元素總數減1.
    //其本質上就是讓投影片可以迴圈播放.
    set_CurrentIndex:function(value)
    {
        if(value<0)
        {
            this._currentIndex=this._slides.length-1;
            return;
        }
        if(value>=this._slides.length)
        {
            this._currentIndex=0;
        }
        else
        {
            this._currentIndex=value;
        }
    },
   
    ShowUserChoose:function(number)
    {
        var img=$get("Image1");
        var slides=this.get_Slides();
        var curIndex=this.get_CurrentIndex();
        img.src=slides[number];
        if(img.style.visibility=="hidden")
        {
            img.style.visibility="visible";
        }
        img.filters.blendTrans.apply();//淡入淡出效果
        img.filters.blendTrans.play();  
        this.set_CurrentIndex(number);
        clearTimeout(_setTime);
        _setTime=window.setTimeout("slideshow.ShowImage()", this.get_Delay());
    },
   
    ShowImage:function()
    {
        var img=$get("Image1");
        var slides=this.get_Slides();
        var curIndex=this.get_CurrentIndex();
        img.src=slides[curIndex];
        if(img.style.visibility=="hidden")
        {
            img.style.visibility="visible";
        }
        img.filters.blendTrans.apply();//淡入淡出效果
        img.filters.blendTrans.play(); 
        this.set_CurrentIndex(curIndex+1);
        _setTime=window.setTimeout("slideshow.ShowImage()", this.get_Delay());
    }
}

//註冊SildeShow的類
ZHSlide.SlideShow.registerClass("ZHSlide.SlideShow");

var slideshow=new ZHSlide.SlideShow();

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至： info-contact@alibabacloud.com 進行舉報並提供相關證據，工作人員會在 5 個工作天內聯絡您，一經查實，本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

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

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

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

    Open a Ticket

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

    Learn More