carouFredSel图片轮播插件基于Jquery，比较常规的轮播插件，支持滚轮及键盘左右按键，加入其它插件可实现更加复杂的特效。
主页地址:http://caroufredsel.dev7studios.com/
例子：
html:
<!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>
<title>充电站GIS分布-实景图</title>
<meta http-equiv="pragma" content="no-cache" />
<meta http-equiv="cache-control" content="no-cache" />
<meta http-equiv="expires" content="0" />
<link rel="stylesheet" type="text/css" href="../../Scripts/jquery-easyui-1.3.1/themes/default/easyui.css" />
<link rel="stylesheet" type="text/css" href="../../Scripts/jquery-easyui-1.3.1/themes/icon.css" />
<link href="../../Styles/PictureChargStation.css" rel="stylesheet" type="text/css" />
<script src="../../Scripts/jquery-easyui-1.3.1/jquery-1.8.0.min.js" type="text/javascript"></script>
<script src="../../Scripts/jquery-easyui-1.3.1/jquery.easyui.min.js" type="text/javascript"></script>
<script src="../../Scripts/jquery-easyui-1.3.1/locale/easyui-lang-zh_CN.js" type="text/javascript"></script>
<script src="../../Scripts/jquery-easyui-1.3.1/jquery.form.js" type="text/javascript"></script>
<script src="../../Scripts/coolcarousel/jquery.carouFredSel-6.0.4-packed.js" type="text/javascript"></script>
<script src="../../Scripts/pictureChargStation/pictureChargStation.js" type="text/javascript"></script>
</head>
<body class="easyui-layout">
<div data-options="region:'center',title:'实景图'">
<table class="tb-style">
<tr class="trpile">
<td class="tdPile">
选择充电站:
</td>
<td class="tdselect">
<select id="chargstation" name="chargstation" onchange="chargstation_onchanged()">
</select>
</td>
<td class="address">
地址:
</td>
<td>
<input id="csaddress" readonly="readonly" type="text" />
</td>
<td>
当月运行概况:充电桩总数量：
</td>
<td>
<input id="cscount" readonly="readonly" type="text" />
</td>
<td>
当月累计充电电量：
</td>
<td>
</td>
</tr>
</table>
<div id="wrapper">
<div id="images">
</div>
<div id="thumbs">
</div>
<a id="prev" href="#"></a><a id="next" href="#"></a>
<div class="pagination" id="foo2_pag"></div>
</div>
</div>
</body>
</html>
css:
html, body
{
height: 100%;
padding:;
margin:;
}
body
{
min-height: 600px;
background-color: #e6e6e6;
}
body *
{
font-family: Arial, Geneva, SunSans-Regular, sans-serif;
font-size: 14px;
color: #333;
line-height: 22px;
}
#wrapper
{
background-color: #fff;
width: 960px;
height: 575px;
margin: -300px 0 0 -225px;
position: absolute;
top: 50%;
left: 25%;
}
#wrapper img
{
display: block;
float: left;
}
#images, #thumbs
{
height: 350px;
overflow: hidden;
}
#images
{
width: 350px;
margin: 50px 0 25px 305px;
}
#thumbs
{
width: 450px;
height: 100px;
}
#thumbs img
{
border: 1px solid #ccc;
padding: 14px;
margin: 0 12px 0 12px;
cursor: pointer;
}
#thumbs img.selected, #thumbs img:hover
{
border-color: #333;
}
#prev, #next
{
width: 15px;
height: 21px;
display: block;
text-indent: -999em;
background: transparent url(../../Scripts/coolcarousel/img/carousel_control.png) no-repeat 0 0;
position: absolute;
bottom: 85px;
}
#prev
{
background-position: 0 0;
left: 15px;
}
#prev:hover
{
left: 14px;
}
#next
{
background-position: -18px 0;
right: 15px;
}
#next:hover
{
right: 14px;
}
#prev.disabled, #next.disabled
{
display: none !important;
}
.pagination
{
text-align: center;
} .pagination a
{
background: url(../../Scripts/coolcarousel/img/miscellaneous_sprite.png) 0 -300px no-repeat transparent;
width: 15px;
height: 15px;
margin: 15px 5px 0 0;
display: inline-block;
} .pagination a.selected
{
background-position: -25px -300px;
cursor: default;
} .pagination a span
{
display: none;
} #source
{
text-align: center;
width: 400px;
margin: 0 0 0 -200px;
position: absolute;
bottom: 10px;
left: 50%;
}
#source, #source a
{
color: #999;
font-size: 12px;
}
#donate-spacer
{
height: 100%;
}
#donate
{
border-top: 1px solid #999;
width: 750px;
padding: 50px 75px;
margin: 0 auto;
overflow: hidden;
}
#donate p, #donate form
{
margin:;
float: left;
}
#donate p
{
width: 650px;
}
#donate form
{
width: 100px;
}
.tdPile
{
text-align: center;
}
#chargstation
{
width: 200px;
}
#cscount
{
border: none;
width: 50px;
background: none;
}
.address
{
width: 50px;
text-align: center;
}
#csaddress
{
border: none;
background: none;
width: 200px;
}
.tb-style
{
width: 100%;
height: 30px;
background-color: #efefef;
}
js:
var myurl;
var mydata;
var mytype = "POST";
var jsonType = "json";
var htmlType = "html";
var commonType = "application/json; charset=utf-8";
var editIndex = undefined; //--------------------------------------------------------------
$(function () {
getChargStationPicture();
initcoolcarousel();
bindChargStation(); }); function initcoolcarousel() {
$('#images').carouFredSel({
circular: false,
auto: false,
items: {
visible: 1
},
scroll: {
fx: 'directscroll'
}
});
$('#thumbs').carouFredSel({
circular: false,
infinite: false,
auto: false,
width: 960,
items: {
visible: {
min: 1,
max: 7
}
},
prev: '#prev',
next: '#next',
pagination: "#foo2_pag" }); $('#thumbs img').click(function () {
$('#images').trigger('slideTo', "#" + this.alt);
$('#thumbs img').removeClass('selected');
$(this).addClass('selected');
return false;
});
} function bindChargStation() { myurl = "../../WebService/PictureChargStationService.ashx";
mydata = { action: 'getChargStation' };
var data = getData();
$("#chargstation").empty();
var length = data.rows.length;
$("#chargstation").append("<option value='0'>—请选择—</option>");
if (length == 0) {
return;
}
for (var i = 0; i < length; i++) {
$("#chargstation").append("<option value='" + data.rows[i].ZHAN_BH + "'>" + data.rows[i].ZHUAN_MC + "</option>");
}
} function getChargStationPicture() {
myurl = "../../WebService/PictureChargStationService.ashx";
mydata = { action: 'getChargStationFile', id: $("#chargstation option:selected").val() };
var data = getData();
var imagesHtml = "", thumbsHtml = "";
if (!data || data == "empty" || data.rows.length == 0) {
imagesHtml += "<img id='non-img' src='../../images/noimage.png' alt='non-img' width='350' height='350' />";
thumbsHtml += "<img src='../../images/noimage.png' alt='non-img' width='70' height='70' />";
}
else {
for (var i = 0; i < data.rows.length; i++) {
imagesHtml += "<img id='ek-aanhanger' src='../../Scripts/coolcarousel/img/large/ek-aanhanger.gif' alt='ek-aanhanger' width='350' height='350' />";
thumbsHtml += "<img src='../../Scripts/coolcarousel/img/small/ek-aanhanger.gif' alt='ek-aanhanger' width='70' height='70' />";
}
} $("#images").append(imagesHtml);
$("#thumbs").append(thumbsHtml);
} //---------------------------------------------------------------------------------------------------- function chargstation_onchanged() {
myurl = "../../WebService/PictureChargStationService.ashx";
mydata = { action: 'getAddress', id: $("#chargstation option:selected").val() };
var data = getData();
if (data.rows.length == 0) {
$("#csaddress").val("");
$("#cscount").val("");
return false;
}
$("#csaddress").val(data.rows[0].XIANGXI_DZ);
mydata = { action: 'getChargPileCount', id: $("#chargstation option:selected").val() };
data = getData();
$("#cscount").val(data);
getChargStationPicture();
return true;
} //---------------------------------------------------------------------------------------------------- function getData() {
var value;
$.ajax({
url: myurl,
type: mytype,
async: false,
data: mydata,
dataType: htmlType,
success: function (data) {
if (data) {
var val = "";
var ret = data.split("|")[0];
eval("val=" + ret);
var res = data.split("|")[1];
if (ret == "0") {
value = "0";
} else {
value = val;
}
}
},
error: function () {
parent.messager("提示", "error");
}
});
return value;
}
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"];
var str = string.Empty;
switch (action)
{ case "getChargStation":
str = GetChargStation(context);
break;
case "getAddress":
str = GetAddress(context);
break;
case "getChargPileCount":
str = GetChargPileCount(context);
break;
case "getChargStationFile":
str = GetChargStationFile(context);
break; }
context.Response.Write(str);
} /// <summary>
/// 获取充电站
/// </summary>
/// <param name="context"></param>
/// <returns></returns>
public string GetChargStation(HttpContext context)
{
var chargstationbll = new ChargStationBll();
var chargstation = new ChargStation();
string str;
var count = ;
try
{
var dt = chargstationbll.Query(chargstation);
str = ConvertToJson.DataTableToJson("rows", dt);
str += "|";
}
catch (Exception e)
{
Log.Error(e);
throw;
}
return str;
} /// <summary>
/// 获取充电站地址
/// </summary>
/// <param name="context"></param>
/// <returns></returns>
public string 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;
}
return str;
} /// <summary>
/// 获取充电桩数量
/// </summary>
/// <param name="context"></param>
/// <returns></returns>
public string 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;
}
return str;
} /// <summary>
/// 获取充电站全景图片
/// </summary>
/// <param name="context"></param>
/// <returns></returns>
public string GetChargStationFile(HttpContext context)
{
var chargstationfilebll = new ChargStationFileBll();
var id = context.Request.Params["id"];
if (string.IsNullOrEmpty(id))
{
return "{\"total\":0,\"rows\":[],\"msg\":\"error\"}"; ;
}
var chargstationfile = new ChargStationFile
{
ZhanBh = Int32.Parse(id)
};
string str;
try
{
var dt = chargstationfilebll.Query(chargstationfile);
str = ConvertToJson.DataTableToJson("rows", dt);
str += "|";
}
catch (Exception e)
{
Log.Error(e);
throw;
}
return str;
} public bool IsReusable
{
get
{
return false;
}
}
}
}
效果：
