图片轮播插件-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要好用,而且样式丰富.值得注意的是, ...
随机推荐
- 纪念大一的日子，一个简单的C++
//Author:xtyang //记得大一学C语言,永远都不明白如何调用一个函数,真是好可爱呀. #include<iostream> using namespace std; //定义 ...
- MFC中改变控件的大小和位置
用CWnd类的函数MoveWindow()或SetWindowPos()可以改变控件的大小和位置. void MoveWindow(int x,int y,int nWidth,int nHeight ...
- ORACLE 数据库概述以及Oracel数据库的安装、卸载、使用
一:Orcale简介 1.发展史 1978年,Orcale诞生 1982年,Orcale3推出了,它是第一个能够运行在大型机和小型机上的关系型数据库 1997年,Orcale公司推出了基于java语言 ...
- 小菜鸟带着梦想学chromium
风雨送春归, 飞雪迎春到. 已是悬崖百丈冰, 犹有花枝俏. 俏也不争春, 只把春来报. 待到山花烂漫时, 她在丛中笑. 这首卜算子·咏梅可是应了我的心情了.最近换工作,受到频频打击,面试过程中发现满世 ...
- OSPF系列
实验一.点对点链路上的OSPF 拓扑图 1. 首先配置好路由器R1接口地址和回环地址 2. 配置路由器R2的接口地址和回环地址 3. 配置路由器R3的接口地址和环回地址 4. 配置R1的OSPF协议 ...
- git merge 到 非当前 branch
1. Add a remote alias for your local repository, ex: git remote add self file:///path/to/your/reposi ...
- iOS访问通讯录开发-读取联系人信息
读取通信录中的联系人一般的过程是先查找联系人记录,然后再访问记录的属性,属性又可以分为单值属性和多值属性.通过下面例子介绍联系人的查询,以及单值属性和多值属性的访问,还有读取联系人中的图片数据. 本案 ...
- 分栏控制器和导航栏目tabBarItem，UINavigationController
//// AppDelegate.m// TabBarControllerDemo//// Created by qianfeng on 15/9/22.// Copyright (c) 20 ...
- Nginx集群(转)
转自:http://hi.baidu.com/xingyuanju/blog/item/779a2a23b7ebb749935807f1.html http://hi.baidu.com/dianhu ...
- MYSQL基础03(日期函数)
工作中对日期的处理是经常遇到的,需求可能多种多样,因此重点介绍. 1.获取当前日期 select NOW() -- 结果:2015-10-28 22:41:11 ),NOW() -- 结果 2015- ...