使用Flash插件、Mootools ，XML实现图片的动态切换

目前在给一个朋友做一个简单网站。首页要动态切换图片。

我的思路是：

1、前台Flash插件实现。

2、数据获取使用Mootools的Request.JSON,数据格式是JSON格式。(个人比较偏好Mootools，喜欢Mootools的simple not dirty）

3、数据存储用XML。原因是1）数据较小，没必要放到数据库里面。2）想学习XML的操作方法。

4、可以维护XML数据

不废话了，上图先。

上图使用Flash插件实现的，数据是通过Mootools的Ajax方法获取的。

前台代码：

<script type="text/javascript">        

    var focus_width=900

    var focus_height=569

    var text_height=0

    var swf_height = focus_height+text_height

    var pics="";

    var links="";

    var texts=""

    var i=0;

    //通过Mootools的Ajax获取数据 

    var jsonRequest = new Request.JSON({url: 'getImagesJson.aspx', 

    async:false,//同步调用，因为后面flash插件代码是js输出的，异步调用数据加载不上去

    onSuccess: function(PicJson,text){  

      for(i=0;i<PicJson.length-1;i++)

      {

          pics=pics+PicJson[i].src+"|";

          texts=texts+PicJson[i].description+"|";

         // links=links+PicJson[i].url+"|";

      }

          pics=pics+PicJson[i].src;

          texts=texts+PicJson[i].description;

         // links=links+PicJson[i].url;

    },

    onError: function (text, error) {

        alert(text.value);

        alert(error.value);

    }

    });

    jsonRequest.send();

    //在页面输出flash插件代码

    document.write('<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0" width="'+ focus_width +'" height="'+ swf_height +'">');

    document.write('<param name="allowScriptAccess" value="sameDomain"><param name="movie" value="images/focus.swf"><param name="quality" value="high"><param name="bgcolor" value="ffffff">');

    document.write('<param name="menu" value="false"><param name=wmode value="opaque">');

    document.write('<param name="FlashVars" value="pics='+pics+'&links='+links+'&texts='+texts+'&borderwidth='+focus_width+'&borderheight='+focus_height+'&textheight='+text_height+'">');

    document.write('<embed src="pixviewer.swf" wmode="opaque" FlashVars="pics='+pics+'&links='+links+'&texts='+texts+'&borderwidth='+focus_width+'&borderheight='+focus_height+'&textheight='+text_height+'" menu="false" bgcolor="#F0F0F0" quality="high" width="'+ focus_width +'" height="'+ focus_height +'" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />');  document.write('</object>');

</script>

Ajax获取数据页面（getImagesJson.aspx）

注意前台只保留：

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

后台代码：

using System;

using System.Collections;

using System.Configuration;

using System.Data;

using System.Linq;

using System.Web;

using System.Web.Security;

using System.Web.UI;

using System.Web.UI.HtmlControls;

using System.Web.UI.WebControls;

using System.Web.UI.WebControls.WebParts;

using System.Xml.Linq;

using Newtonsoft.Json;

using System.Collections.Generic;

using System.Xml;

public partial class getImagesJson : System.Web.UI.Page

{

    protected void Page_Load(object sender, EventArgs e)

    {

        if(!IsPostBack)

        {

            string filePath = Server.MapPath("xml/PicShow.xml");

            XDocument doc = XDocument.Load(filePath);

            var item = from p in doc.Root.Elements()

                       orderby int.Parse(p.Element("order").Value)

                       select new

                       {                           

                           name = p.Element("name").Value,

                           description = p.Element("description").Value,

                           src = p.Element("src").Value,

                           url = p.Element("url").Value,

                           order = p.Element("order").Value

                       };

            XmlDocument document = new XmlDocument();

            document.Load(filePath);

            document.SelectSingleNode("pictures");

            int i = 0;

            string strJson = "[";

            for ( i = 0; i < item.Count()-1;i++ )

            {                

                strJson = strJson+"{\"name\":\"" + item.ElementAt(i).name + "\",\"description\":\"" + item.ElementAt(i).description + "\",\"src\":\"UploadFiles/hotPics/" + item.ElementAt(i).src.ToString() + "\",\"url\":\"" + item.ElementAt(i).url + "\"},";

            }

            //strJson = strJson + "{name:'" + item.ElementAt(0).name + "',description:'" + item.ElementAt(0).description + "',src:'" + item.ElementAt(0).src + "',url:'" + item.ElementAt(0).url + "'}}";

            strJson = strJson + "{\"name\":\"" + item.ElementAt(i).name + "\",\"description\":\"" + item.ElementAt(i).description + "\",\"src\":\"UploadFiles/hotPics/" + item.ElementAt(i).src.ToString() + "\",\"url\":\"" + item.ElementAt(i).url + "\"}]";

            Response.Write(strJson);

        }

    }

}

其中：PicShow.xml如下：

<?xml version="1.0" encoding="utf-8"?>

<pictures>

  <picture id="1">

    <name>活动图片1</name>

    <description>活动图片1</description>

    <src>1.jpg</src>

    <url>#</url>

    <order>1</order>

  </picture>

  <picture id="2">

    <name>活动图片2</name>

    <description>活动图片2</description>

    <src>2.jpg</src>

    <url>#</url>

    <order>2</order>

  </picture>

  <picture id="3">

    <name>活动图片3</name>

    <description>活动图片3</description>

    <src>3.jpg</src>

    <url>#</url>

    <order>3</order>

  </picture>

  <picture id="4">

    <name>活动图片4</name>

    <description>活动图片4</description>

    <src>4.jpg</src>

    <url>#</url>

    <order>4</order>

  </picture>

</pictures>

本次只写这么多，下次和大家分享一下Linq XML的使用方法，最后我还会放出Demo的，敬请期待。

转载于:https://www.cnblogs.com/gusixing/articles/2038614.html