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. # HTML && CSS 学习笔记

    https://www.zybuluo.com/denglongku/note/532786 1.Div左右居中 <div>1<div> div{ width:300px; h ...

  2. 跟我一起玩转FineUI之嵌套表格

    最近一直在研究FineUI(http://www.fineui.com/),那么什么是FineUI呢,FineUI是基于 ExtJS 的专业 ASP.NET 控件库.创建 No JavaScript, ...

  3. asp.net 之 GC (垃圾回收机制)

    今天抽时间好好整理了下GC相关知识,看了CSDN和博客园的几篇文章,有了一定的简单了解,决定根据个人理解整合一份随笔写下来,望诸位指教. 一:基础问题 1.首先需要知道了解什么是GC? GC如其名,就 ...

  4. ASP.NET缓存全解析3：页面局部缓存 转自网络原文作者李天平

    有时缓存整个页面是不现实的,因为页的某些部分可能在每次请求时都需要变化.在这些情况下,只能缓存页的一部分.顾名思义,页面部分缓存是将页面部分内容保存在内存中以便响应用户请求,而页面其他部分内容则为动态 ...

  5. PictureBox控件鼠标进入的手形改变和提示

    PictureBox控件载入了图片后,如果要设置其为链接作用的功能,一般需要当鼠标移动到其上时鼠标自动变为手形以提示用户此时可以点击,如果图形无法方便辨识链接的具体功能,最好此时给与一定提示. 1.鼠 ...

  6. 在Linux下进行磁盘分区

      1.         分区前的规划   2.         查看本机上的磁盘信息   3.         对第二个磁盘进行交换式分区操作(输入m为帮助信息) 图 1:n为新建分区 图 2:p为 ...

  7. 【学习笔记】【C语言】变量

    1. 什么是变量 当一个数据的值需要经常改变或者不确定时,就应该用变量来表示.比如游戏积分. 2. 定义变量 1> 目的 任何变量在使用之前,必须先进行定义. 定义变量的目的是:在内存中分配一块 ...

  8. vi 命令行模式功能键

    目录 目录内容 I 切换到插入模式,此时光标位于开始输入文件处 A 切换到插入模式,并从目前光标所在位置的下一个位置开始输入文字 O 切换到插入模式,并从行首开始插入行的一行 [ctrl]+[b] 屏 ...

  9. PowerDesigner提示This data item is already used in a primary identifier.的处理

    原文链接: http://blog.csdn.net/lopper/article/details/5293545 今天同事在编制一个数据库脚本的时候,提示了This data item is alr ...

  10. 分享10款激发灵感的最新HTML5/CSS3应用

    1.HTML5/CSS3实现iOS Path菜单 菜单动画很酷 Path菜单相信大家都不陌生吧,它在iOS中非常流行,今天我们要分享的菜单就是利用HTML5和CSS3技术来模拟实现这款iOS Path ...