动态显示轮播图片-阿里云开发者社区

我指的动态是时时从数据库中取的数据，在页面上动态显示：

我用到的轮播插件是： carouFredSel

html:

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4     <title>充电站GIS分布-实景图</title>
 5     <meta http-equiv="pragma" content="no-cache" />
 6     <meta http-equiv="cache-control" content="no-cache" />
 7     <meta http-equiv="expires" content="0" />
 8     <link rel="stylesheet" type="text/css" href="../../Scripts/jquery-easyui-1.3.1/themes/default/easyui.css" />
 9     <link rel="stylesheet" type="text/css" href="../../Scripts/jquery-easyui-1.3.1/themes/icon.css" />
10     <link href="../../Styles/PictureChargStation.css" rel="stylesheet" type="text/css" />
11     <script src="../../Scripts/jquery-easyui-1.3.1/jquery-1.8.0.min.js" type="text/javascript"></script>
12     <script src="../../Scripts/jquery-easyui-1.3.1/jquery.easyui.min.js" type="text/javascript"></script>
13     <script src="../../Scripts/jquery-easyui-1.3.1/locale/easyui-lang-zh_CN.js" type="text/javascript"></script>
14     <script src="../../Scripts/jquery-easyui-1.3.1/jquery.form.js" type="text/javascript"></script>
15     <script src="../../Scripts/coolcarousel/jquery.carouFredSel-6.0.4-packed.js" type="text/javascript"></script>
16     <script src="../../Scripts/pictureChargStation/pictureChargStation.js" type="text/javascript"></script>
17 </head>
18 <body class="easyui-layout">
19     <div data-options="region:'center',title:'实景图'">
20         <table class="tb-style">
21             <tr class="trpile">
22                 <td class="tdPile">
23                     选择充电站:
24                 </td>
25                 <td class="tdselect">
26                     <select id="chargstation" name="chargstation" onchange="chargstation_onchanged()">
27                     </select>
28                 </td>
29                 <td class="address">
30                     地址:
31                 </td>
32                 <td>
33                     <input id="csaddress" readonly="readonly" type="text" />
34                 </td>
35                 <td>
36                     当月运行概况:充电桩总数量：
37                 </td>
38                 <td>
39                     <input id="cscount" readonly="readonly" type="text" />
40                 </td>
41                 <td>
42                     当月累计充电电量：
43                 </td>
44                 <td>
45                 </td>
46             </tr>
47         </table>
48         <div id="wrapper">
49             <div id="images">    
50             </div>
51             <div id="thumbs">
52             </div>
53             <a id="prev" href="#"></a><a id="next" href="#"></a>
54             <div class="pagination" id="foo2_pag"></div>
55         </div>
56     </div>
57 </body>
58 </html>

javascript:

  1 var myurl;
  2 var mydata;
  3 var mytype = "POST";
  4 var jsonType = "json";
  5 var htmlType = "html";
  6 var commonType = "application/json; charset=utf-8";
  7 var editIndex = undefined;
  8 
  9 //--------------------------------------------------------------
 10 $(function () {
 11     getChargStationPicture();
 12     bindChargStation();
 13 
 14 });
 15 
 16 function initcoolcarousel() {
 17     $('#images').carouFredSel({
 18         circular: false,
 19         auto: false,
 20         items: {
 21             visible: 1
 22         },
 23         scroll: {
 24             fx: 'directscroll'
 25         }
 26     });
 27     $('#thumbs').carouFredSel({
 28         circular: false,
 29         infinite: false,
 30         auto: false,
 31         width: 960,
 32         items: {
 33             visible: 7
 34         },
 35         prev: '#prev',
 36         next: '#next',
 37         pagination: "#foo2_pag"
 38     });
 39 
 40     $('#thumbs img').click(function () {
 41         $('#images').trigger('slideTo', "#" + this.alt);
 42         $('#thumbs img').removeClass('selected');
 43         $(this).addClass('selected');
 44         return false;
 45     });
 46 
 47 }
 48 
 49 function bindChargStation() {
 50 
 51     myurl = "../../WebService/PictureChargStationService.ashx";
 52     mydata = { action: 'getChargStation' };
 53     var data = getData();
 54     $("#chargstation").empty();
 55     var length = data.rows.length;
 56     $("#chargstation").append("<option value='0'>—请选择—</option>");
 57     if (length == 0) {
 58         return;
 59     }
 60     for (var i = 0; i < length; i++) {
 61         $("#chargstation").append("<option value='" + data.rows[i].ZHAN_BH + "'>" + data.rows[i].ZHUAN_MC + "</option>");
 62     }
 63 }
 64 
 65 
 66 function getChargStationPicture() {
 67     myurl = "../../WebService/PictureChargStationService.ashx";
 68     mydata = { action: 'getChargStationFileCount', id: $("#chargstation option:selected").val() };
 69     var data = getData();
 70     for (var k = 0; k <= count; k++) {
 71         $("#images").trigger("removeItem", 0);
 72         $("#thumbs").trigger("removeItem", 0);
 73     }
 74     count = data.rows.length;
 75     var imagesHtml = "", thumbsHtml = "";
 76     if (!data || data == "empty" || data.rows.length == 0) {
 77         imagesHtml += "<img id='non-img' src='../../images/noimage.png' alt='non-img' width='450' height='280' />";
 78         thumbsHtml += "<img src='../../images/noimage.png' alt='non-img' width='70' height='70' />";
 79     }
 80     else {
 81         for (var i = 0; i < data.rows.length; i++) {
 82             imagesHtml += "<img id='img_" + i + "' alt='img_" + i + "' width='450' height='280' />";
 83             thumbsHtml += "<img id='" + i + "_img' alt='img_" + i + "' width='70' height='70' />";
 84         }
 85     }
 86     $("#images").trigger("insertItem", imagesHtml);
 87     $("#thumbs").trigger("insertItem", thumbsHtml);
 88     for (var j = 0; j < data.rows.length; j++) {
 89         $("#img_" + j).attr("src", "../../WebService/PictureChargStationService.ashx?action=getChargStationFile&fileid=" + data.rows[j].ID);
 90         $("#" + j + "_img").attr("src", $("#img_" + j).attr("src"));
 91     }
 92     initcoolcarousel();
 93 }
 94 
 95 
 96 //----------------------------------------------------------------------------------------------------
 97 var count = 0;
 98 function chargstation_onchanged() {
 99    
100     myurl = "../../WebService/PictureChargStationService.ashx";
101     mydata = { action: 'getAddress', id: $("#chargstation option:selected").val() };
102     var data = getData();
103     if (data.rows.length == 0) {
104         $("#csaddress").val("");
105         $("#cscount").val("");
106         return false;
107     }
108     $("#csaddress").val(data.rows[0].XIANGXI_DZ);
109     mydata = { action: 'getChargPileCount', id: $("#chargstation option:selected").val() };
110     data = getData();
111     $("#cscount").val(data);
112     getChargStationPicture();
113 
114     return true;
115 }
116 
117 
118 //----------------------------------------------------------------------------------------------------
119 
120 function getData() {
121     var value;
122     $.ajax({
123         url: myurl,
124         type: mytype,
125         async: false,
126         data: mydata,
127         dataType: htmlType,
128         success: function (data) {
129             if (data) {
130                 var val = "";
131                 var ret = data.split("|")[0];
132                 eval("val=" + ret);
133                 var res = data.split("|")[1];
134                 if (ret == "0") {
135                     value = "0";
136                 } else {
137                     value = val;
138                 }
139             }
140         },
141         error: function () {
142             parent.messager("提示", "error");
143         }
144     });
145     return value;
146 }

webservice:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using ChargingPile.BLL;
using ChargingPile.Model;
using log4net;

namespace ChargingPile.UI.WEB.WebService
{
    /// <summary>
    /// Summary description for PictureChargStationService
    /// </summary>
    public class PictureChargStationService : IHttpHandler
    {
        protected ILog Log = LogManager.GetLogger("PriceAdjustmentService");
        readonly OprLogBll _oprLogBll = new OprLogBll();
        public void ProcessRequest(HttpContext context)
        {
            context.Response.ContentType = "text/plain";
            var action = context.Request.Params["action"];
            switch (action)
            {

                case "getChargStation":
                    GetChargStation(context);
                    break;
                case "getAddress":
                    GetAddress(context);
                    break;
                case "getChargPileCount":
                    GetChargPileCount(context);
                    break;
                case "getChargStationFile":
                    GetChargStationFile(context);
                    break;
                case "getChargStationFileCount":
                    GetChargStationFileCount(context);
                    break;

            }
        }

        /// <summary>
        /// 获取充电站
        /// </summary>
        /// <param name="context"></param>
        /// <returns></returns>
        public void GetChargStation(HttpContext context)
        {
            var chargstationbll = new ChargStationBll();
            var chargstation = new ChargStation();
            string str;
            var count = 0;
            try
            {
                var dt = chargstationbll.Query(chargstation);
                str = ConvertToJson.DataTableToJson("rows", dt);
                str += "|";
            }
            catch (Exception e)
            {
                Log.Error(e);
                throw;
            }
            context.Response.Write(str);
        }

        /// <summary>
        /// 获取充电站地址
        /// </summary>
        /// <param name="context"></param>
        /// <returns></returns>
        public void GetAddress(HttpContext context)
        {
            var chargstationbll = new ChargStationBll();
            var chargstation = new ChargStation
                {
                    ZhanBh = Int32.Parse(context.Request.Params["id"])
                };
            string str;
            try
            {
                var dt = chargstationbll.Query(chargstation);
                str = ConvertToJson.DataTableToJson("rows", dt);
                str += "|";
            }
            catch (Exception e)
            {
                Log.Error(e);
                throw;
            }
            context.Response.Write(str);
        }

        /// <summary>
        /// 获取充电桩数量
        /// </summary>
        /// <param name="context"></param>
        /// <returns></returns>
        public void GetChargPileCount(HttpContext context)
        {
            var chargstationbll = new ChargStationBll();
            var id = Int32.Parse(context.Request.Params["id"]);

            string str = null;
            try
            {
                var count = chargstationbll.FindByChargPileCount(id);
                str += count + "|";
            }
            catch (Exception e)
            {
                Log.Error(e);
                throw;
            }
            context.Response.Write(str);
        }

        /// <summary>
        /// 获取充电站全景图片
        /// </summary>
        /// <param name="context"></param>
        /// <returns></returns>
        public void GetChargStationFile(HttpContext context)
        {
            var chargstationfilebll = new ChargStationFileBll();
            var fileid = context.Request.Params["fileid"];
            var chargstationfile = new ChargStationFile
            {
                Id = fileid
            };
            byte[] bytes;
            try
            {
                var dt = chargstationfilebll.Query(chargstationfile);
                bytes = dt.Rows[0]["FILECONTEXT"] as byte[];

            }
            catch (Exception e)
            {
                Log.Error(e);
                throw;
            }
            if (bytes != null)
                context.Response.BinaryWrite(bytes);
        }

        /// <summary>
        /// 
        /// </summary>
        /// <param name="context"></param>
        public void GetChargStationFileCount(HttpContext context)
        {
            var chargstationfilebll = new ChargStationFileBll();
            var fileid = context.Request.Params["id"];
            if (string.IsNullOrEmpty(fileid))
            {
                context.Response.Write("{\"total\":0,\"rows\":[],\"msg\":\"error\"}");
                return;
            }
            string str;
            var chargstationfile = new ChargStationFile
                {
                    ZhanBh = int.Parse(fileid)
                };
            try
            {
                //var count = chargstationfilebll.FindByCount(fileid);
                var dt = chargstationfilebll.Query(chargstationfile);
                str = ConvertToJson.DataTableToJson("rows", dt);
                str = str.Substring(1, str.Length - 2);
                str = "{\"total\":\"" + dt.Rows.Count + "\"," + str + "}";
                str += "|";

            }
            catch (Exception e)
            {
                Log.Error(e);
                throw;
            }
            context.Response.Write(str);
        }

        public bool IsReusable
        {
            get
            {
                return false;
            }
        }
    }
}