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. Android-多平台分享(新浪微博)

    很多时候,我们都会用到分享,比如说逛淘宝时,看中一件衣服,想要给小伙伴看看,我会将这件宝贝分享给我的小伙伴,当然,分享的平台就有很多啦,我分享他微信.QQ.或者微博都是可以,但是本人最喜欢微信分享啦 ...

  2. 干货：Android 源码使用心得分享

          我相信很多初学者会和我一样经常在网上去找Android开发源码,但是往往因为运行不起来非常的懊恼!在做爱开发网站的时候,收集App代码时就遇到了这种困难,我相信网络上面的源码大部分在发布前 ...

  3. DynamicObject数据包操作

    DynamicObject的结构非常简单明了,就是一个字典,类似于一个Dictionary<string, object>,其中的object可能是一个简单值(普通字段),可能是一个复杂值 ...

  4. Cisco基本命令配置

    实验一 路由器的基本命令操作 1 实验目标 ü 熟悉路由器的命令行操作 ü 能够使用命令行帮助 ü 能够查看路由器接口信息 ü 能够产看路由器配置信息 ü 能够配置以太网接口 ü 能够配置广域网接口 ...

  5. sql获取时间时分秒

    select datename(hour,getdate())+':'+datename(minute,getdate())+':'+datename(second,getdate())

  6. CentOS7 固定ip

    1. 进入/etc/ network-scripts/ 下ifcfg-eno16777736(文件名可能不一样,单前缀一般是ifcfg-eno) 2. vi打开 编辑  修改bootproro=&qu ...

  7. WCF之服务元数据

    服务元数据是用来获得服务的EndPoint的信息,也就是它的ABC. 服务有两种方案可以发布自己的元数据. 一种是基于HTTP-GET协议提供元数据: 一种是元数据交换方式,它往往使用一个专门的终结点 ...

  8. JS源码（条件的判定，循环，数组，函数，对象）整理摘录

    --- title: JS学习笔记-从条件判断语句到对象创建 date: 2016-04-28 21:31:13 tags: [javascript,front-end] ---JS学习笔记——整理自 ...

  9. ESB数据采集思路

    昨天接到一个任务,使用公司的ESB,调用别人的接口,把得到的数据存储到mysql数据库当中,这里简单记录解决思路,方便以后查看. 1.拿到一个网站的地址,使用火狐浏览器的firebug工具,查看其传递 ...

  10. Linux 静态库和动态库 使用说明

        Linux下程序运行中,有两种库,静态库和动态库.     静态库:名字一般为libxxx.a,编译时会整合到可执行程序中,优点是运行时不需要外部函数库支持,缺点是编译后程序较大,一旦静态库改 ...