图片轮播插件-carouFredSel
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;
}
}
}
}
效果：
图片轮播插件-carouFredSel的更多相关文章
- PgwSlideshow-基于Jquery的图片轮播插件
0 PgwSlideshow简介 PgwSlideshow是一款基于Jquery的图片轮播插件,基本布局分为上下结构,上方为大图轮播区域,用户可自定义图片轮播切换的间隔时间,也可以通过单击左右方向按键 ...
- 12款经典的白富美型—jquery图片轮播插件—前端开发必备
图片轮播是网站中的常用功能,用于在有限的网页空间内展示一组产品图片或者照片,同时还有非常吸引人的动画效果.本文向大家推荐12款实用的 jQuery 图片轮播效果插件,帮助你在你的项目中加入一些效果精美 ...
- Nivo Slider - 世界上最棒的 jQuery 图片轮播插件
Nivo Slider 号称世界上最棒的图片轮播插件,有独立的 jQuery 插件和 WordPress 插件两个版本.目前下载量已经突破 1,800,000 次!jQuery 独立版本的插件主要有如 ...
- JQuery插件之图片轮播插件–slideBox
来源:http://www.ido321.com/852.html 今天偶然发现了一个比较好用的图片轮播插件—slideBox 先看看效果:http://slidebox.sinaapp.com/ 代 ...
- 纯js写图片轮播插件
最近终于写成了自己创作的图片轮播插件,使用原生js编写.与目前网上流行的轮播插件相比,功能和效果稍弱,但是使用起来相当方便. 先看html代码 <!DOCTYPE html> <ht ...
- jQuery.YesShow - 图片轮播插件（带图片放大功能）
jQuery.YesShow - 图片轮播插件(带图片放大功能) 使用简单,原文件只要这样就可以了:<div id="yes"> <ul> ...
- Javascript和jQuery WordPress 图片轮播插件， 内容滚动插件，前后切换幻灯片形式显示
用于在有限的网页空间内展示一组产品图片或者照片,同时还有非常吸引人的动画效果.本文向大家推荐12款实用的 jQuery 图片轮播效果插件,帮助你在你的项目中加入一些效果精美的图片轮播效果,希望这些插件 ...
- 图片轮播插件 Slides-SlidesJS-3
图片轮播插件 Slides-SlidesJS-3 demo document 地址: http://slidesjs.com/
- 图片轮播插件Nivo Slider
推荐:图片轮播插件Nivo Slider 因为项目需要一款切换样式多一些的轮播插件,不经意找到了NivoSlider,非常好用,比bootstrap要好用,而且样式丰富.值得注意的是, ...
随机推荐
- MongoDB - The mongo Shell, Configure the mongo Shell
Customize the Prompt You may modify the content of the prompt by setting the variable prompt in the ...
- Log4net记录日志存库并存本地
<?xml version="1.0" encoding="utf-8"?> <configuration> <configSec ...
- php折线图 布局图
例子1: 1 <?php require_once("../conf.php"); ?> <!DOCTYPE HTML> <html> < ...
- (转)Linux vmstat命令实战详解
vmstat命令是最常见的Linux/Unix监控工具,可以展现给定时间间隔的服务器的状态值,包括服务器的CPU使用率,内存使用,虚拟内存交换情况,IO读写情况.这个命令是我查看Linux/Unix最 ...
- Nginx集群(转)
转自:http://hi.baidu.com/xingyuanju/blog/item/779a2a23b7ebb749935807f1.html http://hi.baidu.com/dianhu ...
- C++使用类型代替枚举量
自己写的C++类型枚举量,可以使用类型识别取代模板,绑定枚举量和多组调用函数,在调用阶段只要指定某组函数就可以根据枚举量调用相应函数. 代码如下: #ifndef __MYENUM_H__ #defi ...
- 【风马一族_Android】 图能
---------------------------------- 第一次 名称:相片查看器 ---------------------------------- 通过3D.自动播放幻灯片.旋转.跳 ...
- python自定义日志函数测试
#!/user/bin/python # -*- encoding: UTF-8 -*- import sys def logs(): print sys._getframe().f_code.co_ ...
- 火星坐标系 (GCJ-02) 与百度坐标系 (BD-09) 的转换算法
$x_pi = 3.14159265358979324 * 3000.0 / 180.0; //火星坐标系 (GCJ-02)转百度坐标系 (BD-09)算法 function bd_encrypt($ ...
- linux传送文件至服务器
scp安全文件拷贝(基于ssh的登陆) 1.你想把本地/home下的文件linux.tar.gz传送至远端服务器10.108.125.30,远端服务器的账号名为name,保存至服务器/home ...