carouFredSel图片轮播插件基于Jquery，比较常规的轮播插件，支持滚轮及键盘左右按键，加入其它插件可实现更加复杂的特效。
主页地址:http://caroufredsel.dev7studios.com/
例子：
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>
css:
1 html, body 2 { 3 height: 100%; 4 padding: 0; 5 margin: 0; 6 } 7 body 8 { 9 min-height: 600px; 10 background-color: #e6e6e6; 11 } 12 body * 13 { 14 font-family: Arial, Geneva, SunSans-Regular, sans-serif; 15 font-size: 14px; 16 color: #333; 17 line-height: 22px; 18 } 19 #wrapper 20 { 21 background-color: #fff; 22 width: 960px; 23 height: 575px; 24 margin: -300px 0 0 -225px; 25 position: absolute; 26 top: 50%; 27 left: 25%; 28 } 29 #wrapper img 30 { 31 display: block; 32 float: left; 33 } 34 #images, #thumbs 35 { 36 height: 350px; 37 overflow: hidden; 38 } 39 #images 40 { 41 width: 350px; 42 margin: 50px 0 25px 305px; 43 } 44 #thumbs 45 { 46 width: 450px; 47 height: 100px; 48 } 49 #thumbs img 50 { 51 border: 1px solid #ccc; 52 padding: 14px; 53 margin: 0 12px 0 12px; 54 cursor: pointer; 55 } 56 #thumbs img.selected, #thumbs img:hover 57 { 58 border-color: #333; 59 } 60 #prev, #next 61 { 62 width: 15px; 63 height: 21px; 64 display: block; 65 text-indent: -999em; 66 background: transparent url(../../Scripts/coolcarousel/img/carousel_control.png) no-repeat 0 0; 67 position: absolute; 68 bottom: 85px; 69 } 70 #prev 71 { 72 background-position: 0 0; 73 left: 15px; 74 } 75 #prev:hover 76 { 77 left: 14px; 78 } 79 #next 80 { 81 background-position: -18px 0; 82 right: 15px; 83 } 84 #next:hover 85 { 86 right: 14px; 87 } 88 #prev.disabled, #next.disabled 89 { 90 display: none !important; 91 } 92 .pagination 93 { 94 text-align: center; 95 } 96 97 .pagination a 98 { 99 background: url(../../Scripts/coolcarousel/img/miscellaneous_sprite.png) 0 -300px no-repeat transparent; 100 width: 15px; 101 height: 15px; 102 margin: 15px 5px 0 0; 103 display: inline-block; 104 } 105 106 .pagination a.selected 107 { 108 background-position: -25px -300px; 109 cursor: default; 110 } 111 112 .pagination a span 113 { 114 display: none; 115 } 116 117 #source 118 { 119 text-align: center; 120 width: 400px; 121 margin: 0 0 0 -200px; 122 position: absolute; 123 bottom: 10px; 124 left: 50%; 125 } 126 #source, #source a 127 { 128 color: #999; 129 font-size: 12px; 130 } 131 #donate-spacer 132 { 133 height: 100%; 134 } 135 #donate 136 { 137 border-top: 1px solid #999; 138 width: 750px; 139 padding: 50px 75px; 140 margin: 0 auto; 141 overflow: hidden; 142 } 143 #donate p, #donate form 144 { 145 margin: 0; 146 float: left; 147 } 148 #donate p 149 { 150 width: 650px; 151 } 152 #donate form 153 { 154 width: 100px; 155 } 156 .tdPile 157 { 158 text-align: center; 159 } 160 #chargstation 161 { 162 width: 200px; 163 } 164 #cscount 165 { 166 border: none; 167 width: 50px; 168 background: none; 169 } 170 .address 171 { 172 width: 50px; 173 text-align: center; 174 } 175 #csaddress 176 { 177 border: none; 178 background: none; 179 width: 200px; 180 } 181 .tb-style 182 { 183 width: 100%; 184 height: 30px; 185 background-color: #efefef; 186 }
js:
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 initcoolcarousel(); 13 bindChargStation(); 14 15 }); 16 17 function initcoolcarousel() { 18 $('#images').carouFredSel({ 19 circular: false, 20 auto: false, 21 items: { 22 visible: 1 23 }, 24 scroll: { 25 fx: 'directscroll' 26 } 27 }); 28 $('#thumbs').carouFredSel({ 29 circular: false, 30 infinite: false, 31 auto: false, 32 960, 33 items: { 34 visible: { 35 min: 1, 36 max: 7 37 } 38 }, 39 prev: '#prev', 40 next: '#next', 41 pagination: "#foo2_pag" 42 43 }); 44 45 $('#thumbs img').click(function () { 46 $('#images').trigger('slideTo', "#" + this.alt); 47 $('#thumbs img').removeClass('selected'); 48 $(this).addClass('selected'); 49 return false; 50 }); 51 } 52 53 function bindChargStation() { 54 55 myurl = "../../WebService/PictureChargStationService.ashx"; 56 mydata = { action: 'getChargStation' }; 57 var data = getData(); 58 $("#chargstation").empty(); 59 var length = data.rows.length; 60 $("#chargstation").append("<option value='0'>—请选择—</option>"); 61 if (length == 0) { 62 return; 63 } 64 for (var i = 0; i < length; i++) { 65 $("#chargstation").append("<option value='" + data.rows[i].ZHAN_BH + "'>" + data.rows[i].ZHUAN_MC + "</option>"); 66 } 67 } 68 69 70 function getChargStationPicture() { 71 myurl = "../../WebService/PictureChargStationService.ashx"; 72 mydata = { action: 'getChargStationFile', id: $("#chargstation option:selected").val() }; 73 var data = getData(); 74 var imagesHtml = "", thumbsHtml = ""; 75 if (!data || data == "empty" || data.rows.length == 0) { 76 imagesHtml += "<img id='non-img' src='../../images/noimage.png' alt='non-img' width='350' height='350' />"; 77 thumbsHtml += "<img src='../../images/noimage.png' alt='non-img' width='70' height='70' />"; 78 } 79 else { 80 for (var i = 0; i < data.rows.length; i++) { 81 imagesHtml += "<img id='ek-aanhanger' src='../../Scripts/coolcarousel/img/large/ek-aanhanger.gif' alt='ek-aanhanger' width='350' height='350' />"; 82 thumbsHtml += "<img src='../../Scripts/coolcarousel/img/small/ek-aanhanger.gif' alt='ek-aanhanger' width='70' height='70' />"; 83 } 84 } 85 86 $("#images").append(imagesHtml); 87 $("#thumbs").append(thumbsHtml); 88 } 89 90 91 //---------------------------------------------------------------------------------------------------- 92 93 function chargstation_onchanged() { 94 myurl = "../../WebService/PictureChargStationService.ashx"; 95 mydata = { action: 'getAddress', id: $("#chargstation option:selected").val() }; 96 var data = getData(); 97 if (data.rows.length == 0) { 98 $("#csaddress").val(""); 99 $("#cscount").val(""); 100 return false; 101 } 102 $("#csaddress").val(data.rows[0].XIANGXI_DZ); 103 mydata = { action: 'getChargPileCount', id: $("#chargstation option:selected").val() }; 104 data = getData(); 105 $("#cscount").val(data); 106 getChargStationPicture(); 107 return true; 108 } 109 110 111 //---------------------------------------------------------------------------------------------------- 112 113 function getData() { 114 var value; 115 $.ajax({ 116 url: myurl, 117 type: mytype, 118 async: false, 119 data: mydata, 120 dataType: htmlType, 121 success: function (data) { 122 if (data) { 123 var val = ""; 124 var ret = data.split("|")[0]; 125 eval("val=" + ret); 126 var res = data.split("|")[1]; 127 if (ret == "0") { 128 value = "0"; 129 } else { 130 value = val; 131 } 132 } 133 }, 134 error: function () { 135 parent.messager("提示", "error"); 136 } 137 }); 138 return value; 139 }
webservice:
1 using System; 2 using System.Collections.Generic; 3 using System.Linq; 4 using System.Web; 5 using ChargingPile.BLL; 6 using ChargingPile.Model; 7 using log4net; 8 9 namespace ChargingPile.UI.WEB.WebService 10 { 11 /// <summary> 12 /// Summary description for PictureChargStationService 13 /// </summary> 14 public class PictureChargStationService : IHttpHandler 15 { 16 protected ILog Log = LogManager.GetLogger("PriceAdjustmentService"); 17 readonly OprLogBll _oprLogBll = new OprLogBll(); 18 public void ProcessRequest(HttpContext context) 19 { 20 context.Response.ContentType = "text/plain"; 21 var action = context.Request.Params["action"]; 22 var str = string.Empty; 23 switch (action) 24 { 25 26 case "getChargStation": 27 str = GetChargStation(context); 28 break; 29 case "getAddress": 30 str = GetAddress(context); 31 break; 32 case "getChargPileCount": 33 str = GetChargPileCount(context); 34 break; 35 case "getChargStationFile": 36 str = GetChargStationFile(context); 37 break; 38 39 } 40 context.Response.Write(str); 41 } 42 43 /// <summary> 44 /// 获取充电站 45 /// </summary> 46 /// <param name="context"></param> 47 /// <returns></returns> 48 public string GetChargStation(HttpContext context) 49 { 50 var chargstationbll = new ChargStationBll(); 51 var chargstation = new ChargStation(); 52 string str; 53 var count = 0; 54 try 55 { 56 var dt = chargstationbll.Query(chargstation); 57 str = ConvertToJson.DataTableToJson("rows", dt); 58 str += "|"; 59 } 60 catch (Exception e) 61 { 62 Log.Error(e); 63 throw; 64 } 65 return str; 66 } 67 68 /// <summary> 69 /// 获取充电站地址 70 /// </summary> 71 /// <param name="context"></param> 72 /// <returns></returns> 73 public string GetAddress(HttpContext context) 74 { 75 var chargstationbll = new ChargStationBll(); 76 var chargstation = new ChargStation 77 { 78 ZhanBh = Int32.Parse(context.Request.Params["id"]) 79 }; 80 string str; 81 try 82 { 83 var dt = chargstationbll.Query(chargstation); 84 str = ConvertToJson.DataTableToJson("rows", dt); 85 str += "|"; 86 } 87 catch (Exception e) 88 { 89 Log.Error(e); 90 throw; 91 } 92 return str; 93 } 94 95 /// <summary> 96 /// 获取充电桩数量 97 /// </summary> 98 /// <param name="context"></param> 99 /// <returns></returns> 100 public string GetChargPileCount(HttpContext context) 101 { 102 var chargstationbll = new ChargStationBll(); 103 var id = Int32.Parse(context.Request.Params["id"]); 104 105 string str = null; 106 try 107 { 108 var count = chargstationbll.FindByChargPileCount(id); 109 str += count + "|"; 110 } 111 catch (Exception e) 112 { 113 Log.Error(e); 114 throw; 115 } 116 return str; 117 } 118 119 /// <summary> 120 /// 获取充电站全景图片 121 /// </summary> 122 /// <param name="context"></param> 123 /// <returns></returns> 124 public string GetChargStationFile(HttpContext context) 125 { 126 var chargstationfilebll = new ChargStationFileBll(); 127 var id = context.Request.Params["id"]; 128 if (string.IsNullOrEmpty(id)) 129 { 130 return "{"total":0,"rows":[],"msg":"error"}"; ; 131 } 132 var chargstationfile = new ChargStationFile 133 { 134 ZhanBh = Int32.Parse(id) 135 }; 136 string str; 137 try 138 { 139 var dt = chargstationfilebll.Query(chargstationfile); 140 str = ConvertToJson.DataTableToJson("rows", dt); 141 str += "|"; 142 } 143 catch (Exception e) 144 { 145 Log.Error(e); 146 throw; 147 } 148 return str; 149 } 150 151 public bool IsReusable 152 { 153 get 154 { 155 return false; 156 } 157 } 158 } 159 }
效果：
