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的更多相关文章

  1. PgwSlideshow-基于Jquery的图片轮播插件

    0 PgwSlideshow简介 PgwSlideshow是一款基于Jquery的图片轮播插件,基本布局分为上下结构,上方为大图轮播区域,用户可自定义图片轮播切换的间隔时间,也可以通过单击左右方向按键 ...

  2. 12款经典的白富美型—jquery图片轮播插件—前端开发必备

    图片轮播是网站中的常用功能,用于在有限的网页空间内展示一组产品图片或者照片,同时还有非常吸引人的动画效果.本文向大家推荐12款实用的 jQuery 图片轮播效果插件,帮助你在你的项目中加入一些效果精美 ...

  3. Nivo Slider - 世界上最棒的 jQuery 图片轮播插件

    Nivo Slider 号称世界上最棒的图片轮播插件,有独立的 jQuery 插件和 WordPress 插件两个版本.目前下载量已经突破 1,800,000 次!jQuery 独立版本的插件主要有如 ...

  4. JQuery插件之图片轮播插件–slideBox

    来源:http://www.ido321.com/852.html 今天偶然发现了一个比较好用的图片轮播插件—slideBox 先看看效果:http://slidebox.sinaapp.com/ 代 ...

  5. 纯js写图片轮播插件

    最近终于写成了自己创作的图片轮播插件,使用原生js编写.与目前网上流行的轮播插件相比,功能和效果稍弱,但是使用起来相当方便. 先看html代码 <!DOCTYPE html> <ht ...

  6. jQuery.YesShow - 图片轮播插件（带图片放大功能）

    jQuery.YesShow - 图片轮播插件(带图片放大功能) 使用简单,原文件只要这样就可以了:<div id="yes">         <ul> ...

  7. Javascript和jQuery WordPress 图片轮播插件， 内容滚动插件，前后切换幻灯片形式显示

    用于在有限的网页空间内展示一组产品图片或者照片,同时还有非常吸引人的动画效果.本文向大家推荐12款实用的 jQuery 图片轮播效果插件,帮助你在你的项目中加入一些效果精美的图片轮播效果,希望这些插件 ...

  8. 图片轮播插件 Slides-SlidesJS-3

    图片轮播插件  Slides-SlidesJS-3 demo document 地址: http://slidesjs.com/

  9. 图片轮播插件Nivo Slider

    推荐:图片轮播插件Nivo Slider         因为项目需要一款切换样式多一些的轮播插件,不经意找到了NivoSlider,非常好用,比bootstrap要好用,而且样式丰富.值得注意的是, ...

随机推荐

  1. 微信内置浏览器中，点击下拉框出现页面乱跳转现象（iphone）

    微信内置浏览器中,点击下拉框出现页面乱跳转现象(iphone) 前言: 这是小菜博客的第三篇文章.一直认为自己可以表达的东西太过简单,难以上台面,总是吝啬地不肯写.就算是写,也不知道从何开始.在同事的 ...

  2. 锋利的jQuery第2版学习笔记8~11章

    第8章,用jQuery打造个性网站 网站结构 文件结构 images文件夹用于存放将要用到的图片 styles文件夹用于存放CSS样式表,个人更倾向于使用CSS文件夹 scripts文件夹用于存放jQ ...

  3. Javascript计算中英文混输字符串长度V2

    同上篇, client端也需要同样规则验证 compact_strlen: function(str) { var strlen = 0; for(var i =0; i<str.length; ...

  4. 破解软件感悟－PE文件格式之Import Table（引入表）（四）

    先来看一个可执行文件的实例:本例程打开一PE文件,将所有引入dll和对应的函数名读入一编辑控件,同时显示 IMAGE_IMPORT_DESCRIPTOR 结构各域值. C:\QQDownload\bl ...

  5. asp.net渐变

    简介:第一个参数代表渐变的方向,后面的StartColorStr和End就不用解释了: filter: progid:DXImageTransform.Microsoft.Gradient(Gradi ...

  6. JS闭包理解_摘

    原文地址1:http://www.cnblogs.com/mzwr1982/archive/2012/05/20/2509295.html 闭包是一个比较抽象的概念,尤其是对js新手来说.书上的解释实 ...

  7. 网络HTTP、JSON、XML解析等 复习

    一.一个HTTP请求的基本要素1.请求URL:客户端通过哪个路径找到服务器 2.请求参数:客户端发送给服务器的数据* 比如登录时需要发送的用户名和密码 3.返回结果:服务器返回给客户端的数据* 一般是 ...

  8. ajax 返回数据 无法得到其属性的解决办法

    当我们用ajax无法 得到其属性.正常情况下是: <script type="text/javascript">        function useAjax(sen ...

  9. State模式

    地铁十字转门 状态迁移表格. 起始状态 触发迁移的事件 终止状态  要执行的动作. Locked   Coin               UnLocked UnLock UnLocked Pass  ...

  10. .NET中的 枚举

    我理解的枚举就是编程中约定的一个"可选值":例如QQ的在线状态,分别有    在线,Q我吧,隐身,忙碌等等...我觉得这就是一个枚举. 1.普通枚举 1) 实例 public en ...