图片轮播插件-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要好用,而且样式丰富.值得注意的是, ...
随机推荐
- 跟我一起学习ASP.NET 4.5 MVC4.0（六）（转）
这一系列文章跨度有点大,由于最近忙于其他事情,没有更新,今天重新安装了下Win8系统,VS2012和SQLServer 2012,顺便抽空继续一篇.随着VS2012 RC版本的放出,ASP.NET M ...
- 关于SVN下载代码和Android Studio里面导入别人代码build tools不一致问题总结
项目build tools的sdk我没有 网络问题没法下载. 解决问题 方法 1.下载对应的SDK.需要VPN,或者FQ 2.将bulid.gradle的内容用下面的内容替换 // Top-level ...
- jQuery中的选择器<思维导图>
选择器是jQuery的重要组成部分,在jQuery中,对事件处理.遍历DOM和Ajax操作都依赖于选择器.如果能熟练地使用选择器,不仅能简化代码,而且可以达到事半功倍的效果. 下面是关于jQuery中 ...
- HTML5 Web SQL Database 数据库的使用方法【图文说明】
页面代码: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" c ...
- DCL,DDL,DML,DQL
DCL(Data Control Language)是数据库控制语言. 是用来设置或更改数据库用户或角色权限的语句,包括(grant,deny,revoke等)语句. 在默认状态下,只有sysadmi ...
- HTML5/jQuery动画应用 3D视觉效果
今天我们要来分享几款很酷的HTML5/CSS3动画应用,虽然不是HTML5 3D应用,但也有3D的视觉效果.HTML5结合jQuery,让网页应用变得更加强大了.一起来看看这些HTML5/jQuery ...
- 在Windows Phone中使用HTML编程
在开发Windows Phone的项目中,需求中有几个页面是要用表格来布局的(效果图如下),由于Grid中有的边线是虚的,而且没有边线,果断放弃了,用了border将表格的线加上去了.于是在有表格布局 ...
- css解决IE6、Chrome、ff 浏览器position:fixed;和闪动问题
首先说下开发模式,刚刚开始接触,基本沿用web端开发方式,目前开发模式上没有找到的适合的,现在基本这样:1,电脑nginx配置服务器3,电脑和手机连同一个局域网,2,android root 和 ip ...
- dedecms 分页样式
<div class="dede_pages"> <ul class="pagelist"> {dede:pagelist lis ...
- localStorage变更事件当前页响应新解
html5的localStorage相信大家都是很熟悉了,但是在chrome等支持该对象的浏览器中(ie10除外),如果你监听 storage变更事件你就会发现,当数据发生变化时本页是监听不到stor ...