Slider.js轻量级图片播放控件

Slider.js轻量级图片播放控件

Slider.js基于HTML5和CSS3实现的Slideshow

  1、Slider.js 是一个图片播放Slideshow引擎，采用jQuery、CSS3和HTML5 canvas技术实现。

  2、可以为播放的条目设置文本标题并带链接，用户可以通过分页码或向前/向后链接进行浏览。

  3、js代码开源，易懂。展示界面和交互都可以定制。

示例截图

slider.js及样式引入

<script src="../Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
    <link href="../Slider/css/slider.css" rel="stylesheet" type="text/css" />
    <script src="../Slider/js/jquery-1.7.2.min.js" type="text/javascript"></script>
    <script src="../Slider/js/jQuery-easing.js" type="text/javascript"></script>
    <script src="../Slider/js/jQuery-jcSlider.js" type="text/javascript"></script>

html代码

<div class="main-content">
        <div id="pic_wrap" style="display: none">
            <ul id="imgShow">
                <li>
                    <div class="middle-out">
                        <div class="middle-in">
                            <img src="../Img/Chrysanthemum.jpg" width="573" height="300" />
                        </div>
                        <div align="center" style="margin-top: 5px; padding-top: 5px;">
                            Chrysanthemum
                        </div>
                    </div>
                </li>
                 <li>
                    <div class="middle-out">
                        <div class="middle-in">
                            <img src="../Img/Desert.jpg" width="573" height="300"/>
                        </div>
                        <div align="center" style="margin-top: 5px; padding-top: 5px;">
                            Desert
                        </div>
                    </div>
                </li>
                 <li>
                    <div class="middle-out">
                        <div class="middle-in">
                            <img src="../Img/Hydrangeas.jpg" width="573" height="300"/>
                        </div>
                        <div align="center" style="margin-top: 5px; padding-top: 5px;">
                            Hydrangeas
                        </div>
                    </div>
                </li>
                 <li>
                    <div class="middle-out">
                        <div class="middle-in">
                            <img src="../Img/Jellyfish.jpg" width="573" height="300"/>
                        </div>
                        <div align="center" style="margin-top: 5px; padding-top: 5px;">
                            Jellyfish
                        </div>
                    </div>
                </li>
            </ul>
        </div>
    </div>

JS代码：

<script type="text/javascript">
        $(function () {
            $('#pic_wrap').jcSlider({
                loading: false,                 //预加载loading开关设置，提供true,false
                loadpic: '../Slider/img/loading.gif',     //预加载loading图片路径，相对定位,如../img/riddick.png
                play: true,                     //是否开起自动播放功能，提供true,false
                play_speed: 2000,               //自动播放速度设置，提供easing值 或 数值(mm)
                slider_btn: true,               //左右按钮开关，提供true,false
                slider_speed: 500,              //图片切换速度设置，提供easing值 或 数值(mm)
                slider_num: true,               //数字按钮开关，提供true,false
                offset: 0,                      //设置左右按钮偏移量(px)
                btn_event: 'mouseover',             //数字按钮事件设置，提供click,mouseover等
                btn_position: 'middle',         //数字按钮位置，提供left,middle,right
                num_offsetW: 0,                 //设置数字按钮的X偏移(px)
                num_offsetH: 400,               //设置数字按钮的Y偏移(px)
                scaling: false,                  //是否设置图片大小，提供true,false
                 956,                     //设置图片宽度单位(px)
                height: 300,                    //设置图片高度单位(px)        
                sliderModle: 'xScroll'
            });
            var tagli = $("#imgShow li");
            if (tagli.length > 0) {
                $('#pic_wrap').css('display', 'block');
            }
            var _w1 = $('#pic_wrap').width();
            var _w2 = $('#sliderNum').width();
            $('#sliderNum').css('left', (_w1 - _w2) / 2);
        });
    </script>

控件下载地址：http://download.csdn.net/detail/zhai123_/5982569

 

再谈C#编码规范

 

编码规范是老生常谈的问题，现在再看代码规范可能不会再去在意变量，控件的命名方法等，而是更加关注代码的实用性。

首先我们要明白一下几点，

1.代码写出来除了让他跑起来还有个非常非常重要的作用是维护，因为没有一成不变的代码，需求变化代码就不可避免的要变化。

2.你不是一个人在写代码，你身后有一个团队，这个团队中任何一个人都有可能会改你的代码，你如果写的不规范，后面的人会跟着写。举一个例子，最初的代码可能是这样的，

                if (OrderInfo.O_OrdersEntity.DirectFlightChannel.Trim().ToUpper() == "CZ-SP")
                {
                    OrderCostAndWeightEntity e = new OrderCostAndWeightEntity();
                    e.FlightAgency = InsuranceCommon.GetStrategyFlightAgencyNew(OrderInfo.O_OrdersEntity.DirectFlightChannel);
                    e = ReGetFlight.GetDirectFlightHighWeightEntity(OrderInfo.O_FlightEntity, "", e.FlightAgency);
                    e.Sendticketcity = int.Parse(ConfigurationManager.AppSettings["SendticketcityOfDirectFlights_HU"].ToString());
                    regetFlightInitData.HighCostAndWeightEntity = e;
                    regetFlightInitData.TicketType = "0001";
                    //如果是海航,则不需要政策倒查验证
                    regetFlightInitData.ReSearchNoFlight = false;
                }
                else
                {
                    OrderCostAndWeightEntity e = new OrderCostAndWeightEntity();
                    e.Sendticketcity = int.Parse(ConfigurationManager.AppSettings["SendticketcityOfDirectFlights_HU"].ToString());
                    e.FlightAgency = InsuranceCommon.GetStrategyFlightAgencyNew(OrderInfo.O_OrdersEntity.DirectFlightChannel);
                    e.CostRate1 = 1.0M;
                    regetFlightInitData.HighCostAndWeightEntity = e;
                    //如果是海航,则不需要政策倒查验证
                    regetFlightInitData.ReSearchNoFlight = false;

                }

但是过一时间又来个需求，对于“MU-WS”也需要走上面的逻辑，你会怎么写，如果你只是完成任务可能会像下面这样写

                if (OrderInfo.O_OrdersEntity.DirectFlightChannel.Trim().ToUpper() == "CZ-SP" || OrderInfo.O_OrdersEntity.DirectFlightChannel.Trim().ToUpper() == "MU-WS")
                {
                    OrderCostAndWeightEntity e = new OrderCostAndWeightEntity();
                    e.FlightAgency = InsuranceCommon.GetStrategyFlightAgencyNew(OrderInfo.O_OrdersEntity.DirectFlightChannel);
                    e = ReGetFlight.GetDirectFlightHighWeightEntity(OrderInfo.O_FlightEntity, "", e.FlightAgency);
                    e.Sendticketcity = int.Parse(ConfigurationManager.AppSettings["SendticketcityOfDirectFlights_HU"].ToString());
                    regetFlightInitData.HighCostAndWeightEntity = e;
                    regetFlightInitData.TicketType = "0001";
                    //如果是海航,则不需要政策倒查验证
                    regetFlightInitData.ReSearchNoFlight = false;
                }
                else
                {
                    OrderCostAndWeightEntity e = new OrderCostAndWeightEntity();
                    e.Sendticketcity = int.Parse(ConfigurationManager.AppSettings["SendticketcityOfDirectFlights_HU"].ToString());
                    e.FlightAgency = InsuranceCommon.GetStrategyFlightAgencyNew(OrderInfo.O_OrdersEntity.DirectFlightChannel);
                    e.CostRate1 = 1.0M;
                    regetFlightInitData.HighCostAndWeightEntity = e;
                    //如果是海航,则不需要政策倒查验证
                    regetFlightInitData.ReSearchNoFlight = false;

                }

如果真的这么写你就是始作俑者，后面的人如果都和你一样就都会朝着葫芦画瓢，最后代码可能会是这样的

                if (OrderInfo.O_OrdersEntity.DirectFlightChannel.Trim().ToUpper() == "CZ-SP" || OrderInfo.O_OrdersEntity.DirectFlightChannel.Trim().ToUpper() == "MU-WS" || OrderInfo.O_OrdersEntity.DirectFlightChannel.Trim().ToUpper() == "MU-WS" || OrderInfo.O_OrdersEntity.DirectFlightChannel.Trim().ToUpper() == "MU-SP" || OrderInfo.O_OrdersEntity.DirectFlightChannel.Trim().ToUpper() == "CZ-WS" || OrderInfo.O_OrdersEntity.DirectFlightChannel.Trim().ToUpper() == "XT-WS")
                {
                    OrderCostAndWeightEntity e = new OrderCostAndWeightEntity();
                    e.FlightAgency = InsuranceCommon.GetStrategyFlightAgencyNew(OrderInfo.O_OrdersEntity.DirectFlightChannel);
                    e = ReGetFlight.GetDirectFlightHighWeightEntity(OrderInfo.O_FlightEntity, "", e.FlightAgency);
                    e.Sendticketcity = int.Parse(ConfigurationManager.AppSettings["SendticketcityOfDirectFlights_HU"].ToString());
                    regetFlightInitData.HighCostAndWeightEntity = e;
                    regetFlightInitData.TicketType = "0001";
                    //如果是海航,则不需要政策倒查验证
                    regetFlightInitData.ReSearchNoFlight = false;
                }
                else
                {
                    OrderCostAndWeightEntity e = new OrderCostAndWeightEntity();
                    e.Sendticketcity = int.Parse(ConfigurationManager.AppSettings["SendticketcityOfDirectFlights_HU"].ToString());
                    e.FlightAgency = InsuranceCommon.GetStrategyFlightAgencyNew(OrderInfo.O_OrdersEntity.DirectFlightChannel);
                    e.CostRate1 = 1.0M;
                    regetFlightInitData.HighCostAndWeightEntity = e;
                    //如果是海航,则不需要政策倒查验证
                    regetFlightInitData.ReSearchNoFlight = false;

                }

看到效果了么，你需要脱一下下面的那个长条才能看到全部代码，这就是你的“因”种下后得到的果实。所以我们需要改进，常见的改进是回车换行，保证所有的代码都在你一眼能够看到的范围之内。改进后代码如下：

                if (OrderInfo.O_OrdersEntity.DirectFlightChannel.Trim().ToUpper() == "CZ-SP" ||
                    OrderInfo.O_OrdersEntity.DirectFlightChannel.Trim().ToUpper() == "MU-WS" || 
                    OrderInfo.O_OrdersEntity.DirectFlightChannel.Trim().ToUpper() == "MU-WS" || 
                    OrderInfo.O_OrdersEntity.DirectFlightChannel.Trim().ToUpper() == "MU-SP" || 
                    OrderInfo.O_OrdersEntity.DirectFlightChannel.Trim().ToUpper() == "CZ-WS" || 
                    OrderInfo.O_OrdersEntity.DirectFlightChannel.Trim().ToUpper() == "XT-WS")
                {
                    OrderCostAndWeightEntity e = new OrderCostAndWeightEntity();
                    e.FlightAgency = InsuranceCommon.GetStrategyFlightAgencyNew(OrderInfo.O_OrdersEntity.DirectFlightChannel);
                    e = ReGetFlight.GetDirectFlightHighWeightEntity(OrderInfo.O_FlightEntity, "", e.FlightAgency);
                    e.Sendticketcity = int.Parse(ConfigurationManager.AppSettings["SendticketcityOfDirectFlights_HU"].ToString());
                    regetFlightInitData.HighCostAndWeightEntity = e;
                    regetFlightInitData.TicketType = "0001";
                    //如果是海航,则不需要政策倒查验证
                    regetFlightInitData.ReSearchNoFlight = false;
                }
                else
                {
                    OrderCostAndWeightEntity e = new OrderCostAndWeightEntity();
                    e.Sendticketcity = int.Parse(ConfigurationManager.AppSettings["SendticketcityOfDirectFlights_HU"].ToString());
                    e.FlightAgency = InsuranceCommon.GetStrategyFlightAgencyNew(OrderInfo.O_OrdersEntity.DirectFlightChannel);
                    e.CostRate1 = 1.0M;
                    regetFlightInitData.HighCostAndWeightEntity = e;
                    //如果是海航,则不需要政策倒查验证
                    regetFlightInitData.ReSearchNoFlight = false;

是不是清爽一点，好看一点，如果你在第一次修改代码的时候这样写后面的人就会跟着这样写，他们可能会想，前面一个人这样写这样写应该不会有问题，虽然代码看起来有点别扭，这时候我们可以带着鉴赏的眼光看这段代码，如果再想一想还有更好的方法，为何不用switch呢？

                switch (OrderInfo.O_OrdersEntity.DirectFlightChannel.Trim().ToUpper())
                {
                    case "CZ-SP":
                    case "MU-SP":
                    case "XT-WS":
                        {
                            OrderCostAndWeightEntity e = new OrderCostAndWeightEntity();
                            e.FlightAgency = InsuranceCommon.GetStrategyFlightAgencyNew(OrderInfo.O_OrdersEntity.DirectFlightChannel);

                            e = ReGetFlight.GetDirectFlightHighWeightEntity(OrderInfo.O_FlightEntity, "", e.FlightAgency);

                            e.Sendticketcity = int.Parse(ConfigurationManager.AppSettings["SendticketcityOfDirectFlights_HU"].ToString());

                            regetFlightInitData.HighCostAndWeightEntity = e;
                            regetFlightInitData.TicketType = "0001";
                            //如果是海航,则不需要政策倒查验证
                            regetFlightInitData.ReSearchNoFlight = false;
                            break;
                        }
                    default:
                        {
                            OrderCostAndWeightEntity e = new OrderCostAndWeightEntity();
                            e.Sendticketcity = int.Parse(ConfigurationManager.AppSettings["SendticketcityOfDirectFlights_HU"].ToString());

                            e.FlightAgency = InsuranceCommon.GetStrategyFlightAgencyNew(OrderInfo.O_OrdersEntity.DirectFlightChannel);

                            e.CostRate1 = 1.0M;

                            regetFlightInitData.HighCostAndWeightEntity = e;
                            //如果是海航,则不需要政策倒查验证
                            regetFlightInitData.ReSearchNoFlight = false;
                            break;
                        }
                }

是不是更加简单，如果你这样写，后面的人会毫不犹豫地在后面加一个case “”：因为这个是大家再熟悉不过的语法了，丝毫不用怀疑这种写法的正确性，于是我们可以带着欣赏的眼光来看这段代码了。

3.要承认我们的心智就这么多，脑袋就这么大，我们既不能一目十行也不能出口成章，所以不要写一言看不出什么意思的代码。

以上的想法都是建立在维护别人代码的痛苦，失落，沮丧，各种不爽，各种吐槽之上，所以代码规范是需要我们时刻关注的，在这里自己总结一些规范，告诫自己不要做始作俑者。

1.一个文件中只放一个类，类名同文件名，不要在一个文件中写好几个类，这样看的清楚。

2.不要在一个文件中写多于1000行的代码，除了那些比较大的实体类。其实我还想说超过500行看起来就有点累，但是在我们的系统中超过10000行的代码比比皆是。

3.一个方法的代码不要超过100行，其实我想说超过50行的方法看起来就有点累。但是在我们的系统中超过200行代码的方法比比皆是。

4.存储过程的代码也不要超过100行,不要在存储过程中写过多的业务逻辑，那是找死，但是在我们的系统中我还真他妈的见过10000多行的存储过程，好宏伟啊！

5.避免写超过5个参数的方法，如果有请使用一个类或者结构来传。

6.一个方法只有一个return，不要多次return。

7.不要给很简单的代码加注释，会有噪音的，会让人误解的，因为你写的大多数情况下很片面。

8.记录日志的时候不要到处都记，有条件的情况下针对客户一次操作（比如下单）只记录一条日志。

另外再这里列举自己对代码做的一些改进，不足之处欢迎大家指出。

1.参数过长使用缩进

a.
                    //获得保险策略信息
                    insuranceStrategy = InsuranceCommon.GetStrategyInsurance(appFltEntity.ProductSource.ToString(), strategyFlightAgency.ToString(), "", appFltEntity.Price.ToString(), appFltEntity.DirectFlightChannel, appFltEntity.Airline.DibitCode, appFltEntity.Flight, appFltEntity.DepartAirport.Code, appFltEntity.ArriveAirport.Code, appFltEntity.SubClass, appFltEntity.DepartTime, appFltEntity.DepartTime.Date, null);

b.
                    //获得保险策略信息
                    insuranceStrategy = InsuranceCommon.GetStrategyInsurance(appFltEntity.ProductSource.ToString(), 
                                                                             strategyFlightAgency.ToString(), 
                                                                             "", 
                                                                             appFltEntity.Price.ToString(), 
                                                                             appFltEntity.DirectFlightChannel, 
                                                                             appFltEntity.Airline.DibitCode, 
                                                                             appFltEntity.Flight, 
                                                                             appFltEntity.DepartAirport.Code, 
                                                                             appFltEntity.ArriveAirport.Code, 
                                                                             appFltEntity.SubClass, 
                                                                             appFltEntity.DepartTime,
                                                                             appFltEntity.DepartTime.Date, 
                                                                             null);

2.if条件过长中使用缩进

a.
                if (IsDirectFlight && (this.CorpPayType == ExpenseType.OWN || this.AccountInfo.DirectOrdersQuoteMode == "I"))
                {
                    strategyFlightAgency = InsuranceCommon.GetStrategyFlightAgencyNew(appFltEntity.DirectFlightChannel);
                    //根据票台获得票台对应的城市
                    strategyCityID = InsuranceCommon.GetFlightAgencyCity(strategyFlightAgency);
                 }

b.
                if (IsDirectFlight &&
                    (this.CorpPayType == ExpenseType.OWN ||
                    this.AccountInfo.DirectOrdersQuoteMode == "I"))
                {
                    strategyFlightAgency = InsuranceCommon.GetStrategyFlightAgencyNew(appFltEntity.DirectFlightChannel);
                    //根据票台获得票台对应的城市
                    strategyCityID = InsuranceCommon.GetFlightAgencyCity(strategyFlightAgency);
                 }

3.使用三元表达式

a.
                        if (InsuranceInfoList != null && InsuranceInfoList.Count > 0 && InsuranceInfoList[0].GeneralDescription.Contains("e路泰康"))
                            collections.Set("IsElderCanBuyInsurance", "T");
                        else
                            collections.Set("IsElderCanBuyInsurance", "F");

b.
collections.Set("IsElderCanBuyInsurance", InsuranceInfoList != null && InsuranceInfoList.Count > 0 && InsuranceInfoList[0].GeneralDescription.Contains("e路泰康") ? "T" : "F");

4.使用蓝不大表达式

a.
                        InsuranceInfoList = InsuranceInfoList.FindAll(delegate(BookingInsuranceInfo iInfo)
                        {
                            return iInfo.TypeID == "C2C30";
                        });

b.
InsuranceInfoList = InsuranceInfoList.FindAll(a => a.TypeID == "C2C30");

5.使用switch表达式，见上面。

6.使用数组包含

a.
            if (wsFlt.ProductSource == 4 && !string.IsNullOrEmpty(wsFlt.DirectFlightChannel) && (wsFlt.DirectFlightChannel.ToUpper() == "HO-WS" or wsFlt.DirectFlightChannel.ToUpper() == "ZH-WS" or wsFlt.DirectFlightChannel.ToUpper() == "XT-WS")
                && directFlightCorporationList != null && directFlightCorporationList.Count > 0 && !directFlightCorporationList.Contains(corporationid))
            {
                return false;
            }

b.
            if (wsFlt.ProductSource == 4 &&
                new List<string>() { "HO-WS", "CZ-WS", "XT-WS" }.Contains(wsFlt.DirectFlightChannel.Trim().ToUpper()) &&
                directFlightCorporationList != null && 
                directFlightCorporationList.Count > 0 &&
                !directFlightCorporationList.Contains(corporationid))
            {
                return false;
            }

可以看到代码中也使用了缩进。

欢迎大家也列举自己遇到的代码简洁之道。

 

分类: 个人学习总结