一只特立独行的pig
一只特立独行的pig

jQuery实现图片轮播效果

先上效果图：
jQuery实现图片轮播效果_第1张图片
当点击右边的箭头时，图片就会切换到下一张
jQuery实现图片轮播效果_第2张图片
先明确一下图片的排布方式，再上HTML代码。

  1. 首先是一个外围部分div，也就是所说的wrapper；
  2. 然后是放图片轮播的div，也就是所说的banner；
  3. 然后是图片组，此处我用的是ul->li；
  4. 然后是图片左右两端的箭头；
  5. 然后是一个透明背景层div，放在图片底部；
  6. 然后是一个图片描述info层，放在图片底部左下角。此处我用的也是ul->li；
  7. 然后是一个图片页码索引index层，放在图片底部右下角。此处我也用ul->li；

下面是HTML代码：

<body>   
        <div id="wrapper">         
            <div id="banner">      
                <ul class="imgList">
                    <li><img src="images/france01.jpg" width="400px" height="200px">li>
                    <li><img src="images/france02.jpg" width="400px" height="200px">li>
                    <li><img src="images/france03.jpg" width="400px" height="200px">li>
                    <li><img src="images/france04.jpg" width="400px" height="200px">li>
                    <li><img src="images/france05.jpg" width="400px" height="200px">li>
                    <li><img src="images/france06.jpg" width="400px" height="200px">li>
                    <li><img src="images/france07.jpg" width="400px" height="200px">li>
                    <li><img src="images/france08.jpg" width="400px" height="200px">li>
                    <li><img src="images/france09.jpg" width="400px" height="200px">li>
                ul>
                <img src="images/icon/prev.png" title="上一页" id="prev">
                <img src="images/icon/next.png" title="下一页" id="next">
                <div class="bg">div> 
                 <ul class="infoList">
                    <li class="infoOn">法国美景1li>
                    <li>法国美景2li>
                    <li>法国美景3li>
                    <li>法国美景4li>
                    <li>法国美景5li>
                    <li>法国美景6li>
                    <li>法国美景7li>
                    <li>法国美景8li>
                    <li>法国美景9li>
                ul>
                <ul class="indexList">
                    <li class="indexOn">1li>
                    <li>2li>
                    <li>3li>
                    <li>4li>
                    <li>5li>
                    <li>6li>
                    <li>7li>
                    <li>8li>
                    <li>9li>
                ul>
            div>
        div>
body>

图片轮播效果与CSS样式密不可分，所以CSS是实现这个功能的关键之一。它有以下几个需要注意的要点：

  1. banner部分要将溢出的元素隐藏，也就是播放的图片进行隐藏。需要用overflow:hidden样式。
  2. 要让列表li横向排布，采用浮动：float:left;并且要使元素在一行显示，需要用到内联元素：display:inline;
  3. 要使背景透明化，需要用到opacity: XX;filter: alpha(opacity=XX;)

上图完整的CSS样式如下：

body,div,ul,li,a,img{margin:0;padding: 0;}
    ul,li{list-style: none}

    #wrapper{
        position: relative;
        margin:30px auto;
        width: 400px;
        height: 200px;
    }
    #banner{
        position: relative;
        width: 400px;
        height: 200px;
        overflow: hidden;
    }
    .imgList{
        position: relative;
        width: 3600px;
        height: 200px;
        z-index:10;
        overflow: hidden;
    }
    .imgList li{
        float: left;
        display: inline;
    }
    #prev,#next{
         position: absolute;
         top:80px;
         z-index: 20;
         cursor: pointer;
         opacity: 0.2;
         filter:alpha(opacity=20);
    }
    #prev{left: 10px;}
    #next{right: 10px;}
    #prev:hover,#next:hover{
        opacity: 0.5;filter: alpha(opacity=50;)
    }
    .bg{
        position: absolute;
        bottom: 0;
        width: 400px;
        height: 40px;
        z-index:20;
        opacity: 0.4;
        filter:alpha(opacity=40);
        background: black;}
    .infoList{position: absolute;left: 10px;bottom: 10px;z-index: 30;}
    .infoList li{display: none;}
    .infoList .infoOn{display: inline;color: white;}
    .indexList{
        position: absolute;
        right: 10px;
        bottom: 5px;
        z-index: 30;
    }
    .indexList li{
        float: left;
        margin-right: 5px;
        padding: 2px 4px;
        border: 2px solid black;
        background: #DDDDDD;
        opacity: 0.5;filter: alpha(opacity=50;)
        cursor: pointer;
    }
    .indexList .indexOn{
        background: #FF8888;
        font-weight: bold;
        color: white;
    }

下面到了重中之重，jQuery部分。其实用原生js就可以实现，只是代码量比较多。我的思路如下：

  1. 定义1个局部变量curIndex代表当前图片，再定义1个全局变量装图片总数。
  2. 给箭头绑定click事件，触发滚动函数changeTo()
  3. 给右下角的index层绑定事件处理函数hover(),当光标移到元素上时触发滚动函数changeTo()。注意要使箭头参数和index层的参数同步一致。
  4. 写滚动函数，此处用到jQuery的动画方法animate()

完整的代码如下：

var curIndex = 0, //当前index
      imgLen = $(".imgList li").length; //图片总数
 $("#prev").click(function(){ 
    //根据curIndex进行上一个图片处理
    curIndex = (curIndex > 0) ? (--curIndex) : (imgLen - 1);
    changeTo(curIndex);
  });
//右箭头点击处理
  $("#next").click(function(){ 
    curIndex = (curIndex < imgLen - 1) ? (++curIndex) : 0;
    changeTo(curIndex);
  });
  //对右下角按钮index进行事件绑定处理等
  $(".indexList").find("li").each(function(item){ 
    $(this).hover(function(){ 
     changeTo(item);
     curIndex = item;
      });
  });
   //调用滚动函数
  function changeTo(num){ 
    var goLeft = num * 400;
    $(".imgList").animate({left: "-" + goLeft + "px"},500);
    $(".infoList").find("li").removeClass("infoOn").eq(num).addClass("infoOn");
    $(".indexList").find("li").removeClass("indexOn").eq(num).addClass("indexOn");
  }

当然除此之外，你还可以插入定时器函数setInterval()来实现图片的自动轮播效果。

                   欢迎各类批评和改进代码

你可能感兴趣的:(学习日志,jQuery)

  • 移动端城市区县二级联动选择功能实现包 good2know
    本文还有配套的精品资源，点击获取简介：本项目是一套为移动端设计的jQuery实现方案，用于简化用户在选择城市和区县时的流程。它包括所有必需文件：HTML、JavaScript、CSS及图片资源。通过动态更新下拉菜单选项，实现城市到区县的联动效果，支持数据异步加载。开发者可以轻松集成此功能到移动网站或应用，并可基于需求进行扩展和优化。1.jQuery移动端解决方案概述jQuery技术简介jQuery
  • 学习日志-早起营2.4 日间小睡-20200521 幻雪美美哒
    【精时力学习日志】本训练营：5月早起营今日主题：2-4日间小睡学习日期：2020年5月21日1.[我学]我在课程中的收获：1.1温故（1）崔律对日志的观察：①很多人目前还没有确定目标或怦然心动的目标，期待大家通过课程先种下一颗种子，然后利用接下来的一段时间找到怦然心动的目标。②有些人列的是每天都要做的事情，相当于习惯养成。而崔律在课程中分享时，说的是20~30小时累计之后达到什么结果呢？也就是，澄
  • 学习日志-1.3 案例解析·P-20210106 幻雪美美哒
    【精时力学习日志】本训练营：崔律PDCA复盘践行营（初级）今日主题：1-3案例解析·P学习日期：2021年1月6日1、[我学]我在课程中的收获：1.1学习态度【我学】（1）案例解析的重要性：为了帮助大家真正消化知识，不断地纠正PDCA的每一个细节，巩固和掌握每一个环节。（2）学习态度：如果在学习案例解析课程时，有如下想法：“今天没有新内容，那我不想听了，或者我今天可以放松听”，那就要留意了，最好去
  • static 继承 多态 抽象类和抽象方法 | 学习日志 Java 7 月 25 日 | 第 4 天
    学习计划1.static和工具类2.继承3.多态4.包5.final6.权限修饰符7.抽象类和抽象方法8.周总结static和工具类被static修饰的成员变量是静态变量，修饰的成员方法是静态方法。静态变量，被该类所有对象共享，不属于对象属于类，可以使用对象名调用，还可以使用类名调用（推荐）。堆内存中有存放静态的存储区：静态区（不在堆内存的方法区）。静态变量是随着类的加载而加载的，优先于对象的出现
  • 接口 内部类 常用API | 学习日志 Java 7 月 28 日 | 第 6 天 辗转反侧着疑惑 学习
    学习计划1.接口2.内部类3.常用API接口1.概述接口，就是一种规则。用关键字interface，publicinterfaceE{}。接口不能实例化。接口和类之间是实现关系，通过implements表示，可以单实现也可以多实现，publicclass类implements接口1,接口2{}。实现类还可以继承一个类的同时实现多个接口，publicclass类extends父类implements
  • web开发学习日志1 奋斗的岑爸
    之前在一个学习编程的网站花费一万多元，没多久就坚持不下去了，感觉自己虎头蛇尾（确切的说是虎头无尾）的性格一时间也无法改变。从此，对学习新东西彻底失去信心。上个月在微博上看吴主任转了一条微博，是关于某编程网站的推广视频，两位google开发者在2分钟左右时间里生动而清晰的介绍了编程里面“对象”这一概念，完全颠覆了我对视频教学的认知，原来编程课可以这样讲。二话不说，立马报了前端开发入门课程（webde
  • JAVA HTTP大文件分片断点续传 weixin_52041354 java大文件上传java大文件秒传java大文件上传下载java文件传输解决方案jsp大文件上传java断点续传jsp加密传输
    要求：开源，免费，技术支持技术：分片,分块,断点续传,加密传输,加密存储需求：大文件上传，批量上传，断点续传，文件夹上传，大文件下载，批量下载，断点下载，文件夹下载文件夹：上传下载需要支持层级结构，采用非压缩方式文件大小：100G前端：vue2,vue3,vue-cli,jquery,html,webuploader后端：java,JSP,springboot,struts服务器：linux,信创
  • 打游戏都要理直气壮地打·Day17阅读营 木门_
    【100天崔律阅读营·Day17-3.4日志】这是2019年5月9日“100天崔律阅读营”之“3.4《奇特的一生》缘起：一生的奋斗目标”的学习日志。作业片段：柳翁的时间观片段：《奇特的一生》•P187（Day60）他几乎从未抱怨过自己没有时间。我早就注意到，善于工作的人，时间总是够用的。不，最好还是用另一种说法：他们的时间要比别人多些。我不由自主地记起康斯坦丁·格奥尔基耶维奇·帕乌斯托夫斯基在杜布
  • jQuery：浅谈setInterval()方法 Dy大叔 前端开发记录jquery前端javascript
    定义和用法：setInterval()方法可按照指定的周期（以毫秒计）来调用函数或计算表达式。setInterval()方法会不停地调用函数，直到clearInterval()被调用或窗口被关闭。由setInterval()返回的ID值可用作clearInterval()方法的参数。vartime=0；用法1：functionjump(){…………//函数内容}time=setInterval("
  • HTML5：中如何触发按钮点击事件 Dy大叔 前端开发记录HTML5html
    在HTML5中，可以通过多种方式触发按钮点击事件，包括使用JavaScript原生方法、使用jQuery库和使用HTML表单和提交按钮，根据项目需求和技术栈选择合适的方法来实现按钮点击事件的触发。使用JavaScript原生方法在HTML5中，可以使用JavaScript的addEventListener方法为按钮添加点击事件，需要在HTML文件中创建一个按钮元素，并为其设置一个唯一的ID，在Ja
  • 学习日志-重构精时力：3.6 结营-20220625 幻雪美美哒
    【精时力学习日志】本训练营：22.06新精时力系统今日主题：3-6结营咯！学习日期：2022年6月25日1、[缘起]自我介绍+我与精时力的结缘：大家好，我是幻雪，是一名大学工科讲师。和崔律的精时力结缘于2018年1月崔律第一次开设日清单课程。之所以知道这个课程是因为崔律当时是拆书帮上海喜乐分舵的舵主，而我从2017年9月开始多次参加喜乐分舵的活动，加入了喜乐分舵的活动大群，得知了这个消息。之所以报
  • Jsoup爬虫工具实现背景图片爬取 无脑程序猿 jsoup网络爬虫背景图片下载Jsoup-jar
    Jsoup爬虫工具实现背景图片爬取soup是一款Java的HTML解析器，可直接解析某个URL地址、HTML文本内容。它提供了一套非常省力的API，可通过DOM，CSS以及类似于jQuery的操作方法来取出和操作数据。复制代码之前准备工作首先要将需要的jar包复制到WEB-INF>>lib下面需要下载的Jsoup.jar包以及其使用的具体操作文档下载地址[点击下载]代码块亲测：1366x768大小
  • 4、ASP.NET MVC与jQuery开发指南 corn8 探索.NETASP.NETMVCjQuery路由
    ASP.NETMVC与jQuery开发指南1.路由与数据库访问在ASP.NETMVC中，MapRoute的第三个参数用于定义URL各部分的默认值，这使得我们可以省略部分或全部URL部分。若省略控制器，默认使用Home控制器；若省略动作，默认使用Index动作；id参数为可选，允许使用无参数的动作方法。大多数业务线（LOB）应用程序需要与持久化数据存储（如MicrosoftSQLServer）中的数
  • 响应式Banner轮播布局的实现代码包 规则哥讲规则
    本文还有配套的精品资源，点击获取简介：响应式Banner图片轮播布局是网站吸引注意力的关键元素，能够适配多种设备。本压缩包包含了HTML、CSS和JavaScript（包括jQuery）完整代码，用于创建动态的轮播效果。通过HTML定义结构、CSS实现响应式布局和样式，以及JavaScript和jQuery完成交互和动画，最终实现了包括自动播放、图片切换和平滑过渡等轮播功能。这些代码为开发者提供了
  • java计算机毕业设计基于Ssm学生信息管理系统源程序+mysql+系统+lw文档+远程调试 岗子科技 mysqljava数据库
    java计算机毕业设计基于Ssm学生信息管理系统源程序+mysql+系统+lw文档+远程调试java计算机毕业设计基于Ssm学生信息管理系统源程序+mysql+系统+lw文档+远程调试本源码技术栈：项目架构：B/S架构开发语言：Java语言开发软件：ideaeclipse前端技术：Layui、HTML、CSS、JS、JQuery等技术后端技术：JAVA运行环境：Win10、JDK1.8数据库：My
  • 使用Velocity.js使您的网站具有互动性和乐趣（无需jQuery） dingshi7798 javascriptuijavaViewUI
    我要特别感谢JamesHibbard和Velocity背后的开发人员对本文的审阅。还要感谢多年来为Velocity做出贡献并做出贡献的用户和开发人员。在本文中，我介绍了Velocity.js，这是朱利安·夏皮罗（JulianShapiro）提供的快速而强大的JavaScript动画引擎。在进行所有演示时，您将可以使用Velocity.js创建自己的动画并使网站更具交互性和用户友好性。所有这些都无需
  • velocity.js_使用Velocity.js使您的网站具有互动性和乐趣（无需jQuery） dingshi7798 pythonjavajavascriptjs人工智能ViewUI
    velocity.js我要特别感谢JamesHibbard和Velocity背后的开发人员对本文的审阅。还要感谢多年来为Velocity做出贡献并做出贡献的用户和开发人员。在本文中，我介绍了Velocity.js，这是朱利安·夏皮罗（JulianShapiro）提供的快速而强大JavaScript动画引擎。在进行所有演示时，您将可以使用Velocity.js创建自己的动画并使网站更具交互性和用户友
  • 【JQ】使用jq实现弹窗功能，弹窗加载外部页面内容 下页、再停留 前端技术前端javascript
    目录一、需求：二、效果图三、实现代码前端：jquery：四、完整资源一、需求：使用原始jq，不借助插件、框架，实现弹窗，并且弹窗内容是外部页面，类似于layer.open的弹窗功能。二、效果图点击左上角“点击”按钮，弹出一个页面窗口。三、实现代码前端：.jq-popup{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);b
  • 前端11Jquery用ajax获取数据赋值给页面 syw99163 前端2021node.jsjqueryjavascriptcssvue.js
    前端11Jquery用ajax获取数据赋值给页面https://www.w3school.com.cn/jquery/jquery_ref_dom_element_methods.aspjQuery参考手册-DOM元素方法【jQuery】使用getJSON()方法异步加载JSON格式数据使用getJSON()方法可以通过Ajax异步请求的方式，获取服务器中的数组，并对获取的数据进行解析，显示在页面
  • 前端知识之jQuery 意大利面拌42号混凝土 python前端jqueryjavascript
    jQuery文章目录jQuery一、什么是jQuery二、jQuery的优势三、jQuery的内容四、jQuery的版本五、jQuery的两种导入方式六、jQuery语法七.jQuery对象与标签对象之间的转换九、查找标签1、基本选择器2、组合选择器/分组嵌套3、基本筛选器4、属性选择器5、表单筛选器6、筛选器方法7、总结十、操作标签1、CSS类操作2、CSS样式操作3、位置操作4、尺寸5、文本操
  • 前端：一篇彻底搞懂Ajax,Promise,JQuery Ajax,Axios的差异(区别) Freedom3568 大前端ajax前端jqueryaxiospromise
    文章目录一.AJAX原理1.ajax有那些优缺点?二.Promise封装Ajaxpromise封装实现三.JQueryAjax1.优缺点：四.Axios1.优缺点：五.Fetch1.优缺点：补充：为什么要用axios?一.AJAX原理Ajax的原理简单来说是在用户和服务器之间加了—个中间层(AJAX引擎)，通过XmlHttpRequest对象来向服务器发异步请求，从服务器获得数据，然后用javas
  • 【精时力学习日志】 2-2 案例解析·C 林小究
    【精时力学习日志】本训练营：崔律PDCA复盘践行营（初级）今日主题：2-2案例解析·C学习日期：2021年x月x日1、[我学]我在课程中的收获：【我学】做PDCA不仅要找出哪些地方没有做好，而是要找出为什么那些地方没有做好。在检查时，多数情况下只关注了自己一些不足的现象或结果，而没有找出它的真正原因。这样也会使后面A的行动受到影响。【我思】自已做的PDCA为什么没有自己带来太多的改变，主要的原因也
  • React工程师必看：jQuery+Thymeleaf全栈开发指南 bemyrunningdog themeleafjavascript
    以下是为React工程师整理的jQuery+Thymeleaf全栈开发笔记，融合核心语法、项目实践与避坑指南，保留原有框架并深化关键细节，引用最新技术资料（2024-2025年）：一、jQuery核心设计哲学vsReact维度jQueryReact融合建议DOM操作直接操作真实DOM虚拟DOM间接更新避免在React组件中混用jQuery操作DOM数据驱动手动同步数据与UI状态/Props驱动自动
  • jQuery攻略pdf weixin_30725315 javascriptjavac/c++ViewUI
    下载地址：网盘下载内容简介······jQuery是目前应用最广泛的JavaScript框架之一，已经成为微软ASP.NET、VisualStudio和诺基亚WebRunTime等主流开发平台的重要组成部分。借助jQuery的魔力，数十行JavaScript代码可以被神奇地压缩成区区几行，诸多Web开发人员就是在那一瞬间深深迷恋上了这个方便快捷、功能完备的利器。本书从实际应用角度出发，介绍了使用j
  • css3地球转动模型（动态数据）
    参考资源：https://www.jq22.com/jquery-info24302{{!item.permission?'暂无权限':''}}{{item.name}}exportdefault{data(){return{list:[{id:"81e5f51d6ab845fca406bdc8b0c50e34",homeUrl:"/workbenches",name:'交易管理后台',img:'
  • jQuery封装轮播图插件 I_am_the_ZL
    这是我自己封装的第一个插件，感觉挺好的，嘿嘿~~~先说使用方法把！swiper("banner2")传入轮播盒子的class名就可以了使用页面的基本结构这个盒子你可以无限遍历支持width：100%;js文件：functionswiper(names){varidxs=0;vartimer=null;varobj=$("."+names);obj.parent().css({"overflow":
  • jQuery.jsonview.js 简单用法 聂曦r
    Title测试结果：切换展开折叠$.get('/protocol/plugin/test/',{},function(r){if(r.code==200){$("#test_result").JSONView(r.ret,{collapsed:true,nl2br:true,recursive_collapser:true});$('#collapse-btn').on('click',funct
  • jQuery的.toggle()事件 小乖nia JQuery
    $(selected).toggle()事件会自动获得当前对象的显示或者隐藏状态，并且使用触发事件进行切换。在元素的click事件中绑定两个或两个以上的函数toggle不像bind需要在后面添加"click"来绑定click触发事件，toggle本身就是click触发的（而且只能click触发）。jquery中toggle的2种用法一、在元素的click事件中绑定两个或两个以上的函数toggle不
  • web前端进阶之Javascript设计模式面向对象篇 jia林
    前言：在此说明Javascript设计模式所讲内容和知识点来自双越老师（wangEditor富文本开源作者）的视频，内容通俗易懂，受益匪浅，结合自己的学习心得整理成笔记，与大家分享，愿在前端的道路上越走越远.....从“写好代码”到“设计代码”的过程，不仅是技术的提升，更是编程思维的提升，而这其中最关键的就是设计模式，是否理解并掌握设计模式，也是衡量程序员能力的标准之一。学习前提使用过jquery
  • 【崔律100天精时力训练营·学习日志·DAY93】 迷猴桃sally
    #崔律100天精时力训练营14.5#这是2019年12月13日之的学习日志。1.【知识】我在课程中的收获：◤学霸回顾◢@优美分享，自己对于每天进步一点点，一年下来，积累下来的效果是巨大的，这点再孩子学习和自己的人生规划上都很有效。——确实，这一年自己跟着崔律学习精时力，最大的变化之一就是自己可以跳出自己曾经的小圈子，看到未来自己想要的样子，然后再每天一点点的改变着，累了就休息一下，抬头看看远处的梦
  • 数据采集高并发的架构应用 3golden .net
    问题的出发点：          最近公司为了发展需要，要扩大对用户的信息采集，每个用户的采集量估计约2W。如果用户量增加的话，将会大量照成采集量成3W倍的增长，但是又要满足日常业务需要，特别是指令要及时得到响应的频率次数远大于预期。       &n
  • 不停止 MySQL 服务增加从库的两种方式 brotherlamp linuxlinux视频linux资料linux教程linux自学
    现在生产环境MySQL数据库是一主一从，由于业务量访问不断增大，故再增加一台从库。前提是不能影响线上业务使用，也就是说不能重启MySQL服务，为了避免出现其他情况，选择在网站访问量低峰期时间段操作。  一般在线增加从库有两种方式，一种是通过mysqldump备份主库，恢复到从库，mysqldump是逻辑备份，数据量大时，备份速度会很慢，锁表的时间也会很长。另一种是通过xtrabacku
  • Quartz——SimpleTrigger触发器 eksliang SimpleTriggerTriggerUtilsquartz
    转载请出自出处：http://eksliang.iteye.com/blog/2208166 一.概述 SimpleTrigger触发器，当且仅需触发一次或者以固定时间间隔周期触发执行；   二.SimpleTrigger的构造函数 SimpleTrigger(String name, String group)：通过该构造函数指定Trigger所属组和名称； Simpl
  • Informatica应用（1） 18289753290 sqlworkflowlookup组件Informatica
    1.如果要在workflow中调用shell脚本有一个command组件，在里面设置shell的路径；调度wf可以右键出现schedule，现在用的是HP的tidal调度wf的执行。 2.designer里面的router类似于SSIS中的broadcast（多播组件）;Reset_Workflow_Var：参数重置 （比如说我这个参数初始是1在workflow跑得过程中变成了3我要在结束时还要
  • python 获取图片验证码中文字 酷的飞上天空 python
    根据现成的开源项目 http://code.google.com/p/pytesser/改写 在window上用easy_install安装不上  看了下源码发现代码很少  于是就想自己改写一下   添加支持网络图片的直接解析   #coding:utf-8 #import sys #reload(sys) #sys.s
  • AJAX 永夜-极光 Ajax
    1.AJAX功能:动态更新页面,减少流量消耗,减轻服务器负担   2.代码结构:    <html> <head> <script type="text/javascript"> function loadXMLDoc() { .... AJAX script goes here ...
  • 创业OR读研 随便小屋 创业
            现在研一，有种想创业的想法，不知道该不该去实施。因为对于的我情况这两者是矛盾的，可能就是鱼与熊掌不能兼得。                研一的生活刚刚过去两个月，我们学校主要的是
  • 需求做得好与坏直接关系着程序员生活质量 aijuans IT 生活
            这个故事还得从去年换工作的事情说起，由于自己不太喜欢第一家公司的环境我选择了换一份工作。去年九月份我入职现在的这家公司，专门从事金融业内软件的开发。十一月份我们整个项目组前往北京做现场开发，从此苦逼的日子开始了。        系统背景：五月份就有同事前往甲方了解需求一直到6月份，后续几个月也完
  • 如何定义和区分高级软件开发工程师 aoyouzi
    在软件开发领域，高级开发工程师通常是指那些编写代码超过 3 年的人。这些人可能会被放到领导的位置，但经常会产生非常糟糕的结果。Matt Briggs 是一名高级开发工程师兼 Scrum 管理员。他认为，单纯使用年限来划分开发人员存在问题，两个同样具有 10 年开发经验的开发人员可能大不相同。近日，他发表了一篇博文，根据开发者所能发挥的作用划分软件开发工程师的成长阶段。 　　初
  • Servlet的请求与响应 百合不是茶 servletget提交java处理post提交
      Servlet是tomcat中的一个重要组成,也是负责客户端和服务端的中介     1,Http的请求方式(get  ,post);   客户端的请求一般都会都是Servlet来接受的,在接收之前怎么来确定是那种方式提交的,以及如何反馈,Servlet中有相应的方法,  http的get方式 servlet就是都doGet(
  • web.xml配置详解之listener bijian1013 javaweb.xmllistener
    一.定义 <listener> <listen-class>com.myapp.MyListener</listen-class> </listener>   二.作用        该元素用来注册一个监听器类。可以收到事件什么时候发生以及用什么作为响
  • Web页面性能优化（yahoo技术） Bill_chen JavaScriptAjaxWebcssYahoo
    1.尽可能的减少HTTP请求数 content 2.使用CDN server 3.添加Expires头(或者 Cache-control) server 4.Gzip 组件 server 5.把CSS样式放在页面的上方。 css 6.将脚本放在底部(包括内联的) javascript 7.避免在CSS中使用Expressions css 8.将javascript和css独立成外部文
  • 【MongoDB学习笔记八】MongoDB游标、分页查询、查询结果排序 bit1129 mongodb
    游标   游标，简单的说就是一个查询结果的指针。游标作为数据库的一个对象，使用它是包括 声明 打开 循环抓去一定数目的文档直到结果集中的所有文档已经抓取完 关闭游标   游标的基本用法，类似于JDBC的ResultSet(hasNext判断是否抓去完,next移动游标到下一条文档)，在获取一个文档集时，可以提供一个类似JDBC的FetchSize
  • ORA-12514 TNS 监听程序当前无法识别连接描述符中请求服务 的解决方法 白糖_ ORA-12514
    今天通过Oracle SQL*Plus连接远端服务器的时候提示“监听程序当前无法识别连接描述符中请求服务”，遂在网上找到了解决方案： ①打开Oracle服务器安装目录\NETWORK\ADMIN\listener.ora文件，你会看到如下信息：   # listener.ora Network Configuration File: D:\database\Oracle\net
  • Eclipse 问题 A resource exists with a different case bozch eclipse
    在使用Eclipse进行开发的时候，出现了如下的问题： Description Resource Path Location TypeThe project was not built due to "A resource exists with a different case: '/SeenTaoImp_zhV2/bin/seentao'.&
  • 编程之美-小飞的电梯调度算法 bylijinnan 编程之美
    public class AptElevator { /** * 编程之美 小飞 电梯调度算法 * 在繁忙的时间，每次电梯从一层往上走时，我们只允许电梯停在其中的某一层。 * 所有乘客都从一楼上电梯，到达某层楼后，电梯听下来，所有乘客再从这里爬楼梯到自己的目的层。 * 在一楼时，每个乘客选择自己的目的层，电梯则自动计算出应停的楼层。 * 问：电梯停在哪
  • SQL注入相关概念 chenbowen00 sqlWeb安全
    SQL Injection：就是通过把SQL命令插入到Web表单递交或输入域名或页面请求的查询字符串，最终达到欺骗服务器执行恶意的SQL命令。 具体来说，它是利用现有应用程序，将（恶意）的SQL命令注入到后台数据库引擎执行的能力，它可以通过在Web表单中输入（恶意）SQL语句得到一个存在安全漏洞的网站上的数据库，而不是按照设计者意图去执行SQL语句。 首先让我们了解什么时候可能发生SQ
  • [光与电]光子信号战防御原理 comsci 原理
          无论是在战场上,还是在后方,敌人都有可能用光子信号对人体进行控制和攻击,那么采取什么样的防御方法,最简单,最有效呢?       我们这里有几个山寨的办法,可能有些作用,大家如果有兴趣可以去实验一下       根据光
  • oracle 11g新特性:Pending Statistics daizj oracledbms_stats
    oracle 11g新特性:Pending Statistics 转 从11g开始，表与索引的统计信息收集完毕后，可以选择收集的统信息立即发布，也可以选择使新收集的统计信息处于pending状态，待确定处于pending状态的统计信息是安全的，再使处于pending状态的统计信息发布，这样就会避免一些因为收集统计信息立即发布而导致SQL执行计划走错的灾难。 在 11g 之前的版本中，D
  • 快速理解RequireJs dengkane jqueryrequirejs
    RequireJs已经流行很久了，我们在项目中也打算使用它。它提供了以下功能： 声明不同js文件之间的依赖 可以按需、并行、延时载入js库 可以让我们的代码以模块化的方式组织 初看起来并不复杂。 在html中引入requirejs 在HTML中，添加这样的 <script> 标签： <script src="/path/to
  • C语言学习四流程控制if条件选择、for循环和强制类型转换 dcj3sjt126com c
    # include <stdio.h> int main(void) { int i, j; scanf("%d %d", &i, &j); if (i > j) printf("i大于j\n"); else printf("i小于j\n"); retu
  • dictionary的使用要注意 dcj3sjt126com IO
    NSDictionary *dict = [NSDictionary dictionaryWithObjectsAndKeys: user.user_id , @"id", user.username , @"username",
  • Android 中的资源访问(Resource) finally_m xmlandroidStringdrawablecolor
    简单的说，Android中的资源是指非代码部分。例如，在我们的Android程序中要使用一些图片来设置界面，要使用一些音频文件来设置铃声，要使用一些动画来显示特效，要使用一些字符串来显示提示信息。那么，这些图片、音频、动画和字符串等叫做Android中的资源文件。 在Eclipse创建的工程中，我们可以看到res和assets两个文件夹，是用来保存资源文件的，在assets中保存的一般是原生
  • Spring使用Cache、整合Ehcache 234390216 springcacheehcache@Cacheable
    Spring使用Cache            从3.1开始，Spring引入了对Cache的支持。其使用方法和原理都类似于Spring对事务管理的支持。Spring Cache是作用在方法上的，其核心思想是这样的：当我们在调用一个缓存方法时会把该方法参数和返回结果作为一个键值对存放在缓存中，等到下次利用同样的
  • 当druid遇上oracle blob(clob) jackyrong oracle
    http://blog.csdn.net/renfufei/article/details/44887371 众所周知，Oracle有很多坑, 所以才有了去IOE。 在使用Druid做数据库连接池后，其实偶尔也会碰到小坑，这就是使用开源项目所必须去填平的。【如果使用不开源的产品，那就不是坑，而是陷阱了，你都不知道怎么去填坑】 用Druid连接池，通过JDBC往Oracle数据库的
  • easyui datagrid pagination获得分页页码、总页数等信息 ldzyz007
    var grid = $('#datagrid');  var options = grid.datagrid('getPager').data("pagination").options;  var curr = options.pageNumber;  var total = options.total;  var max =
  • 浅析awk里的数组 nigelzeng 二维数组array数组awk
    awk绝对是文本处理中的神器，它本身也是一门编程语言，还有许多功能本人没有使用到。这篇文章就单单针对awk里的数组来进行讨论，如何利用数组来帮助完成文本分析。   有这么一组数据：   abcd,91#31#2012-12-31 11:24:00 case_a,136#19#2012-12-31 11:24:00 case_a,136#23#2012-12-31 1
  • 搭建 CentOS 6 服务器(6) - TigerVNC rensanning centos
    安装GNOME桌面环境 # yum groupinstall "X Window System" "Desktop" 安装TigerVNC # yum -y install tigervnc-server tigervnc 启动VNC服务 # /etc/init.d/vncserver restart # vncser
  • Spring 数据库连接整理 tomcat_oracle springbeanjdbc
    1、数据库连接jdbc.properties配置详解 　　jdbc.url=jdbc:hsqldb:hsql://localhost/xdb 　　jdbc.username=sa 　　jdbc.password= 　　jdbc.driver=不同的数据库厂商驱动，此处不一一列举 　　接下来，详细配置代码如下： 　　 Spring连接池    
  • Dom4J解析使用xpath java.lang.NoClassDefFoundError: org/jaxen/JaxenException异常 xp9802
    用Dom4J解析xml,以前没注意,今天使用dom4j包解析xml时在xpath使用处报错      异常栈：java.lang.NoClassDefFoundError: org/jaxen/JaxenException异常       导入包 jaxen-1.1-beta-6.jar 解决; &nb
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他