图片轮播插件-carouFredSel

carouFredSel图片轮播插件基于Jquery，比较常规的轮播插件，支持滚轮及键盘左右按键，加入其它插件可实现更加复杂的特效。

主页地址:http://caroufredsel.dev7studios.com/

例子：

html:

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4     <title>充电站GIS分布-实景图</title>
 5     <meta http-equiv="pragma" content="no-cache" />
 6     <meta http-equiv="cache-control" content="no-cache" />
 7     <meta http-equiv="expires" content="0" />
 8     <link rel="stylesheet" type="text/css" href="../../Scripts/jquery-easyui-1.3.1/themes/default/easyui.css" />
 9     <link rel="stylesheet" type="text/css" href="../../Scripts/jquery-easyui-1.3.1/themes/icon.css" />
10     <link href="../../Styles/PictureChargStation.css" rel="stylesheet" type="text/css" />
11     <script src="../../Scripts/jquery-easyui-1.3.1/jquery-1.8.0.min.js" type="text/javascript"></script>
12     <script src="../../Scripts/jquery-easyui-1.3.1/jquery.easyui.min.js" type="text/javascript"></script>
13     <script src="../../Scripts/jquery-easyui-1.3.1/locale/easyui-lang-zh_CN.js" type="text/javascript"></script>
14     <script src="../../Scripts/jquery-easyui-1.3.1/jquery.form.js" type="text/javascript"></script>
15     <script src="../../Scripts/coolcarousel/jquery.carouFredSel-6.0.4-packed.js" type="text/javascript"></script>
16     <script src="../../Scripts/pictureChargStation/pictureChargStation.js" type="text/javascript"></script>
17 </head>
18 <body class="easyui-layout">
19     <div data-options="region:'center',title:'实景图'">
20         <table class="tb-style">
21             <tr class="trpile">
22                 <td class="tdPile">
23                     选择充电站:
24                 </td>
25                 <td class="tdselect">
26                     <select id="chargstation" name="chargstation" onchange="chargstation_onchanged()">
27                     </select>
28                 </td>
29                 <td class="address">
30                     地址:
31                 </td>
32                 <td>
33                     <input id="csaddress" readonly="readonly" type="text" />
34                 </td>
35                 <td>
36                     当月运行概况:充电桩总数量：
37                 </td>
38                 <td>
39                     <input id="cscount" readonly="readonly" type="text" />
40                 </td>
41                 <td>
42                     当月累计充电电量：
43                 </td>
44                 <td>
45                 </td>
46             </tr>
47         </table>
48         <div id="wrapper">
49             <div id="images">
50             </div>
51             <div id="thumbs">
52             </div>
53             <a id="prev" href="#"></a><a id="next" href="#"></a>
54             <div class="pagination" id="foo2_pag"></div>
55         </div>
56     </div>
57 </body>
58 </html>

 

css:

 

  1 html, body
  2 {
  3     height: 100%;
  4     padding: 0;
  5     margin: 0;
  6 }
  7 body
  8 {
  9     min-height: 600px;
 10     background-color: #e6e6e6;
 11 }
 12 body *
 13 {
 14     font-family: Arial, Geneva, SunSans-Regular, sans-serif;
 15     font-size: 14px;
 16     color: #333;
 17     line-height: 22px;
 18 }
 19 #wrapper
 20 {
 21     background-color: #fff;
 22     width: 960px;
 23     height: 575px;
 24     margin: -300px 0 0 -225px;
 25     position: absolute;
 26     top: 50%;
 27     left: 25%;
 28 }
 29 #wrapper img
 30 {
 31     display: block;
 32     float: left;
 33 }
 34 #images, #thumbs
 35 {
 36     height: 350px;
 37     overflow: hidden;
 38 }
 39 #images
 40 {
 41     width: 350px;
 42     margin: 50px 0 25px 305px;
 43 }
 44 #thumbs
 45 {
 46     width: 450px;
 47     height: 100px;
 48 }
 49 #thumbs img
 50 {
 51     border: 1px solid #ccc;
 52     padding: 14px;
 53     margin: 0 12px 0 12px;
 54     cursor: pointer;
 55 }
 56 #thumbs img.selected, #thumbs img:hover
 57 {
 58     border-color: #333;
 59 }
 60 #prev, #next
 61 {
 62     width: 15px;
 63     height: 21px;
 64     display: block;
 65     text-indent: -999em;
 66     background: transparent url(../../Scripts/coolcarousel/img/carousel_control.png) no-repeat 0 0;
 67     position: absolute;
 68     bottom: 85px;
 69 }
 70 #prev
 71 {
 72     background-position: 0 0;
 73     left: 15px;
 74 }
 75 #prev:hover
 76 {
 77     left: 14px;
 78 }
 79 #next
 80 {
 81     background-position: -18px 0;
 82     right: 15px;
 83 }
 84 #next:hover
 85 {
 86     right: 14px;
 87 }
 88 #prev.disabled, #next.disabled
 89 {
 90     display: none !important;
 91 }
 92 .pagination
 93 {
 94     text-align: center;
 95 }
 96
 97 .pagination a
 98 {
 99     background: url(../../Scripts/coolcarousel/img/miscellaneous_sprite.png) 0 -300px no-repeat transparent;
100     width: 15px;
101     height: 15px;
102     margin: 15px 5px 0 0;
103     display: inline-block;
104 }
105
106 .pagination a.selected
107 {
108     background-position: -25px -300px;
109     cursor: default;
110 }
111
112 .pagination a span
113 {
114     display: none;
115 }
116
117 #source
118 {
119     text-align: center;
120     width: 400px;
121     margin: 0 0 0 -200px;
122     position: absolute;
123     bottom: 10px;
124     left: 50%;
125 }
126 #source, #source a
127 {
128     color: #999;
129     font-size: 12px;
130 }
131 #donate-spacer
132 {
133     height: 100%;
134 }
135 #donate
136 {
137     border-top: 1px solid #999;
138     width: 750px;
139     padding: 50px 75px;
140     margin: 0 auto;
141     overflow: hidden;
142 }
143 #donate p, #donate form
144 {
145     margin: 0;
146     float: left;
147 }
148 #donate p
149 {
150     width: 650px;
151 }
152 #donate form
153 {
154     width: 100px;
155 }
156 .tdPile
157 {
158     text-align: center;
159 }
160 #chargstation
161 {
162     width: 200px;
163 }
164 #cscount
165 {
166     border: none;
167     width: 50px;
168     background: none;
169 }
170 .address
171 {
172     width: 50px;
173     text-align: center;
174 }
175 #csaddress
176 {
177     border: none;
178     background: none;
179     width: 200px;
180 }
181 .tb-style
182 {
183     width: 100%;
184     height: 30px;
185     background-color: #efefef;
186 }

js:

  1 var myurl;
  2 var mydata;
  3 var mytype = "POST";
  4 var jsonType = "json";
  5 var htmlType = "html";
  6 var commonType = "application/json; charset=utf-8";
  7 var editIndex = undefined;
  8
  9 //--------------------------------------------------------------
 10 $(function () {
 11     getChargStationPicture();
 12     initcoolcarousel();
 13     bindChargStation();
 14
 15 });
 16
 17 function initcoolcarousel() {
 18     $('#images').carouFredSel({
 19         circular: false,
 20         auto: false,
 21         items: {
 22             visible: 1
 23         },
 24         scroll: {
 25             fx: 'directscroll'
 26         }
 27     });
 28     $('#thumbs').carouFredSel({
 29         circular: false,
 30         infinite: false,
 31         auto: false,
 32         width: 960,
 33         items: {
 34             visible: {
 35                 min: 1,
 36                 max: 7
 37             }
 38         },
 39         prev: '#prev',
 40         next: '#next',
 41         pagination: "#foo2_pag"
 42
 43     });
 44
 45     $('#thumbs img').click(function () {
 46         $('#images').trigger('slideTo', "#" + this.alt);
 47         $('#thumbs img').removeClass('selected');
 48         $(this).addClass('selected');
 49         return false;
 50     });
 51 }
 52
 53 function bindChargStation() {
 54
 55     myurl = "../../WebService/PictureChargStationService.ashx";
 56     mydata = { action: 'getChargStation' };
 57     var data = getData();
 58     $("#chargstation").empty();
 59     var length = data.rows.length;
 60     $("#chargstation").append("<option value='0'>—请选择—</option>");
 61     if (length == 0) {
 62         return;
 63     }
 64     for (var i = 0; i < length; i++) {
 65         $("#chargstation").append("<option value='" + data.rows[i].ZHAN_BH + "'>" + data.rows[i].ZHUAN_MC + "</option>");
 66     }
 67 }
 68
 69
 70 function getChargStationPicture() {
 71     myurl = "../../WebService/PictureChargStationService.ashx";
 72     mydata = { action: 'getChargStationFile', id: $("#chargstation option:selected").val() };
 73     var data = getData();
 74     var imagesHtml = "", thumbsHtml = "";
 75     if (!data || data == "empty" || data.rows.length == 0) {
 76         imagesHtml += "<img id='non-img' src='../../images/noimage.png' alt='non-img' width='350' height='350' />";
 77         thumbsHtml += "<img src='../../images/noimage.png' alt='non-img' width='70' height='70' />";
 78     }
 79     else {
 80         for (var i = 0; i < data.rows.length; i++) {
 81             imagesHtml += "<img id='ek-aanhanger' src='../../Scripts/coolcarousel/img/large/ek-aanhanger.gif' alt='ek-aanhanger' width='350' height='350' />";
 82             thumbsHtml += "<img src='../../Scripts/coolcarousel/img/small/ek-aanhanger.gif' alt='ek-aanhanger' width='70' height='70' />";
 83         }
 84     }
 85
 86     $("#images").append(imagesHtml);
 87     $("#thumbs").append(thumbsHtml);
 88 }
 89
 90
 91 //----------------------------------------------------------------------------------------------------
 92
 93 function chargstation_onchanged() {
 94     myurl = "../../WebService/PictureChargStationService.ashx";
 95     mydata = { action: 'getAddress', id: $("#chargstation option:selected").val() };
 96     var data = getData();
 97     if (data.rows.length == 0) {
 98         $("#csaddress").val("");
 99         $("#cscount").val("");
100         return false;
101     }
102     $("#csaddress").val(data.rows[0].XIANGXI_DZ);
103     mydata = { action: 'getChargPileCount', id: $("#chargstation option:selected").val() };
104     data = getData();
105     $("#cscount").val(data);
106     getChargStationPicture();
107     return true;
108 }
109
110
111 //----------------------------------------------------------------------------------------------------
112
113 function getData() {
114     var value;
115     $.ajax({
116         url: myurl,
117         type: mytype,
118         async: false,
119         data: mydata,
120         dataType: htmlType,
121         success: function (data) {
122             if (data) {
123                 var val = "";
124                 var ret = data.split("|")[0];
125                 eval("val=" + ret);
126                 var res = data.split("|")[1];
127                 if (ret == "0") {
128                     value = "0";
129                 } else {
130                     value = val;
131                 }
132             }
133         },
134         error: function () {
135             parent.messager("提示", "error");
136         }
137     });
138     return value;
139 }

webservice:

  1 using System;
  2 using System.Collections.Generic;
  3 using System.Linq;
  4 using System.Web;
  5 using ChargingPile.BLL;
  6 using ChargingPile.Model;
  7 using log4net;
  8
  9 namespace ChargingPile.UI.WEB.WebService
 10 {
 11     /// <summary>
 12     /// Summary description for PictureChargStationService
 13     /// </summary>
 14     public class PictureChargStationService : IHttpHandler
 15     {
 16         protected ILog Log = LogManager.GetLogger("PriceAdjustmentService");
 17         readonly OprLogBll _oprLogBll = new OprLogBll();
 18         public void ProcessRequest(HttpContext context)
 19         {
 20             context.Response.ContentType = "text/plain";
 21             var action = context.Request.Params["action"];
 22             var str = string.Empty;
 23             switch (action)
 24             {
 25
 26                 case "getChargStation":
 27                     str = GetChargStation(context);
 28                     break;
 29                 case "getAddress":
 30                     str = GetAddress(context);
 31                     break;
 32                 case "getChargPileCount":
 33                     str = GetChargPileCount(context);
 34                     break;
 35                 case "getChargStationFile":
 36                     str = GetChargStationFile(context);
 37                     break;
 38
 39             }
 40             context.Response.Write(str);
 41         }
 42
 43         /// <summary>
 44         /// 获取充电站
 45         /// </summary>
 46         /// <param name="context"></param>
 47         /// <returns></returns>
 48         public string GetChargStation(HttpContext context)
 49         {
 50             var chargstationbll = new ChargStationBll();
 51             var chargstation = new ChargStation();
 52             string str;
 53             var count = 0;
 54             try
 55             {
 56                 var dt = chargstationbll.Query(chargstation);
 57                 str = ConvertToJson.DataTableToJson("rows", dt);
 58                 str += "|";
 59             }
 60             catch (Exception e)
 61             {
 62                 Log.Error(e);
 63                 throw;
 64             }
 65             return str;
 66         }
 67
 68         /// <summary>
 69         /// 获取充电站地址
 70         /// </summary>
 71         /// <param name="context"></param>
 72         /// <returns></returns>
 73         public string GetAddress(HttpContext context)
 74         {
 75             var chargstationbll = new ChargStationBll();
 76             var chargstation = new ChargStation
 77                 {
 78                     ZhanBh = Int32.Parse(context.Request.Params["id"])
 79                 };
 80             string str;
 81             try
 82             {
 83                 var dt = chargstationbll.Query(chargstation);
 84                 str = ConvertToJson.DataTableToJson("rows", dt);
 85                 str += "|";
 86             }
 87             catch (Exception e)
 88             {
 89                 Log.Error(e);
 90                 throw;
 91             }
 92             return str;
 93         }
 94
 95         /// <summary>
 96         /// 获取充电桩数量
 97         /// </summary>
 98         /// <param name="context"></param>
 99         /// <returns></returns>
100         public string GetChargPileCount(HttpContext context)
101         {
102             var chargstationbll = new ChargStationBll();
103             var id = Int32.Parse(context.Request.Params["id"]);
104
105             string str = null;
106             try
107             {
108                 var count = chargstationbll.FindByChargPileCount(id);
109                 str += count + "|";
110             }
111             catch (Exception e)
112             {
113                 Log.Error(e);
114                 throw;
115             }
116             return str;
117         }
118
119         /// <summary>
120         /// 获取充电站全景图片
121         /// </summary>
122         /// <param name="context"></param>
123         /// <returns></returns>
124         public string GetChargStationFile(HttpContext context)
125         {
126             var chargstationfilebll = new ChargStationFileBll();
127             var id = context.Request.Params["id"];
128             if (string.IsNullOrEmpty(id))
129             {
130                 return "{\"total\":0,\"rows\":[],\"msg\":\"error\"}"; ;
131             }
132             var chargstationfile = new ChargStationFile
133             {
134                 ZhanBh = Int32.Parse(id)
135             };
136             string str;
137             try
138             {
139                 var dt = chargstationfilebll.Query(chargstationfile);
140                 str = ConvertToJson.DataTableToJson("rows", dt);
141                 str += "|";
142             }
143             catch (Exception e)
144             {
145                 Log.Error(e);
146                 throw;
147             }
148             return str;
149         }
150
151         public bool IsReusable
152         {
153             get
154             {
155                 return false;
156             }
157         }
158     }
159 }

效果：

时间： 2024-10-12 13:39:33

图片轮播插件-carouFredSel的相关文章

jquery图片轮播插件仿支付宝2013版全屏图片幻灯片

 这篇文章主要介绍了jquery图片轮播插件,仿支付宝2013版全屏图片幻灯片功能,需要的朋友可以参考下 jquery图片轮播插件仿支付宝2013版全屏图片幻灯片淡出淡进切换效果,在自己的页面里一定要引入jquery   代码如下: <div class="flexslider">     <ul class="slides">         <li style="background:url(images/img1.jpg

jQuery图片轮播插件——前端开发必看_jquery

还记得以前刚接触前端的时候,浏览各大网站,很多都少不了的有个轮播的效果,那个时候自己是一个彻彻底底的小白,想着这些图片滚动起来还真是有意思,是什么让这些图片在一个方向上连续的滚动呢.后来慢慢的接触多了,觉得这些也是so easy的嘛,于是为了加深对js.jQuery的理解以及探究网站上各种效果的实现方法,就有了jQuery插件之路这样一个系列,当然为了纪念当初对轮播的执念,于是就从轮播开始写了一个小小的插件,这只是一个开始,随着后面的了解的更多,也会写一些更加绚丽的DEMO.有兴趣的朋友可以去看

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

图片轮播是网站中的常用功能,用于在有限的网页空间内展示一组产品图片或者照片,同时还有非常吸引人的动画效果.本文向大家推荐12款实用的 jQuery 图片轮播效果插件,帮助你在你的项目中加入一些效果精美的图片轮播效果,希望这些插件能够帮助到你. Nivo Slider 首先推荐的这款插件号称世界上最棒的图片轮播插件,有独立的 jQuery 插件和 WordPress 插件两个版本. 目前下载量已经突破 1,800,000 次!jQuery 独立版本的插件主要有如下特色: ✓  16个独特的过渡效果

jQuery简单自定义图片轮播插件及用法示例_jquery

本文实例讲述了jQuery简单自定义图片轮播插件及用法.分享给大家供大家参考,具体如下: 经常使用别人的插件,现在自己写一个,纪念一下. jQuery.banner.js: /* * banner 0.1 * 使用banner 实现图片定时切换 鼠标经过停止动画 * 鼠标离开,继续动画 */ ;(function($){ $.fn.banner =function(options){ //各种属性和参数 var defaults ={ picWidth:"1000", picHeigh

原生JS实现旋转木马式图片轮播插件_javascript技巧

本人自己写过三个图片轮播,一个是简单的原生JS实现的,没有什么动画效果的,一个是结合JQuery实现的,淡入淡出切换的.现在想做一个酷一点的放在博客或者个人网站,到时候可以展示自己的作品.逛了一下慕课网,发现有个旋转木马的jquery插件课程,有点酷酷的,于是就想着用原生JS封装出来.做起来才发现,没有自己想象中的那么容易...不啰嗦了,讲解一下实现过程吧. 二.效果 由于自己的服务器还没弄好.在线演示不了(ORZ...),只能放一张效果图了.   从图片上还是可以看出大概效果的,我就不多说了.

jquery图片轮播插件仿支付宝2013版全屏图片幻灯片_jquery

jquery图片轮播插件仿支付宝2013版全屏图片幻灯片淡出淡进切换效果,在自己的页面里一定要引入jquery 复制代码 代码如下: <div class="flexslider">    <ul class="slides">        <li style="background:url(images/img1.jpg) 50% 0 no-repeat;"></li>        <l

jQuery实现图片轮播效果代码(基于jquery.pack.js插件)_jquery

本文实例讲述了jQuery实现图片轮播效果代码.分享给大家供大家参考,具体如下: <!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"> <he

jQuery插件boxScroll实现图片轮播特效_jquery

BoxScroll       常见图片轮播效果的简单实现.可以数字列表控制或者左右按键控制.逻辑很简单,到了尽头得往回跑,看看注释就知道了.       代码如下: HTML <!doctype html> <html> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta content="" name=

jQuery实现图片轮播特效代码分享_jquery

本文实例讲述了jQuery超精致图片轮播幻灯片特效.分享给大家供大家参考.具体如下: jquery图片轮播插件PgwSlider是一款非常简单的jquery插件,它可以帮你快速创建一个垂直轮播图. 运行效果图:  小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式. (1)在head区域引入CSS样式: <link href="css/pgwslider.min.css" rel="stylesheet"> (2)js代码: <script s