上一节中，轮播图已经做了一大半，我本日上午抽空把剩下的代码写完了。现在就大概说一下思路吧。
实现上一张和下一张的效果，基本上便是改变ul的margin-left值。为了担保无缝滚动，我们须要在5张图片的首部和尾部各加一张图片。像这样：
<ul> <li class='e0560803b0f1fdae fl'> <a href=\"大众javascript:void(0)\"大众> <img src=\"大众5.jpg \"大众/> </a> </li> <li class='0803b0f1fdae8b9d fl'> <a href=\"大众javascript:void(0)\"大众> <img src=\"大众1.jpg \公众/> </a> </li> <li class='b0f1fdae8b9d4b06 fl'> <a href=\"大众javascript:void(0)\公众> <img src=\公众2.jpg \"大众/> </a> </li> <li class='fdae8b9d4b068b45 fl'> <a href=\公众javascript:void(0)\公众> <img src=\公众3.jpg \"大众/> </a> </li> <li class='8b9d4b068b458e09 fl'> <a href=\公众javascript:void(0)\"大众> <img src=\"大众4.jpg \"大众/> </a> </li> <li class='4b068b458e09f2c3 fl'> <a href=\"大众javascript:void(0)\公众> <img src=\公众5.jpg \"大众/> </a> </li> <li class='8b458e09f2c3393e fl'> <a href=\"大众javascript:void(0)\公众> <img src=\公众1.jpg \公众/> </a> </li></ul>
接下来，编写移动图片的方法，为了掌握下一张和上一张，我们定义一个索引变量index就可以啦。
var index = 0;
获取图片的宽度的数量
var imgwidth = $('.banner .content ul li').width(); //获取轮播图片的宽度var len = $('.banner .content ul li').length - 2//获取统共的图片数量
移动图片的方法
function movePicture(){ $('.banner .content ul').animate({'margin-left':-imgwidth (index+1)},1000,function(){ if(index == len){ $(this).css('masrgin-left',-imgwidth); index = 0; } if(index == -1){ $(this).css('margin-left',-imgwidth len); index = len - 1; } });}
末了，给按钮绑定事宜：
rightBtn.on('click',function(){ index ++; movePicture();});leftBtn.on('click',function(){ index --; movePicture();});
3.5.8 按钮的节流掌握
接下来要做一个大略的前台节流，意思便是说，如果有用户闲得无聊，在那冒死的点击下一张的按钮，那么每一次点击都会触发movePicture函数，这个时候，你就会看到图片在那乱跳。
以是，为了避免这种用户的操作，我们须要用js来做一个节流，额，彷佛是叫节流。我记不太清了。意思便是说，比如你在一秒钟内连续点击了8次，那么我就认为这8次中只有1次是有效的，其他的点击都是误操作。
这样的话，无论你怎么狂点鼠标，我都只调用一次movePicture函数。
首先，我们定义一个空的定时器。
var timer = null;
思路为：
每当我触发按钮的点击事宜，就把当前的定时器timer清零，然后又立时给他设置定时内容，比如500毫秒后才进行移动操作。也便是说，如果你狂点鼠标，那么定时器就会被立时清零，然后进入定时器的等待状态。必须要等你满了500毫秒，才进行下面的操作。
事理便是这么大略，这个办法也常常用于上岸按钮上。比如，当你网速很慢的时候，点击上岸，网页没有立即给你跳转页面。有些用户闲着无聊，就在那狂点鼠标，不知道你有没有这么做过呢？
如果没有做好节流，那么就会有大量的要求通报到做事器，会给做事器造成很大的压力。
差不多便是这个意思，上代码：
rightBtn.on('click',function(){ clearTimeout(timer); //定时器清零 timer = setTimeout(function(){ index ++; movePicture(); },500); });leftBtn.on('click',function(){ clearTimeout(timer); //定时器清零 timer = setTimeout(function(){ index --; movePicture(); },500);});
不论我鼠标怎么狂点，它每次都只移动一张图片。
好了，轮播图差不多就聊到这里吧，你可以自己去逐步完善，韶光关系我就不扩展太多了。剩下的就交给你自己去玩耍了，比如，我能不能做一个定时轮播呢，每个5秒钟就自动切换到下一张。
我就不写了。
3.5.9 整合伙源文件
现在，我们把这个已经做好的banner区域搬到项目里。
在WebContent目录下新增一个static文件夹，这里存放各种静态资源文件。
比如img，js，css等
由于刚才的页面中用到了百度资源库里的jQuery文件：
http://libs.baidu.com/jquery/2.0.0/jquery.min.js
现在我们直接将这个url用浏览器打开。
全部复制。
然后在js文件夹中新建一个jQuery.js文件。
现在，将刚才复制的内容原封不动地拷贝进去。
ctrl + s 保存。
OK，jQuery文件已经有了，接下来，我们将素材图片拷贝到img文件夹中。这样，资源文件就全部准备好了。
3.5.10 引用资源文件
在整合好资源文件后，如何将这些资源文件导入我们的index.jsp呢？这是一个问题。
我们将html代码和css样式拷贝到index.jsp中，看看效果。
图片都没有显示出来。
那么，如何改变img的src，使他能够成功引到/Article/WebContent/static/img 里面的图片呢？
我供应一种比较方便的办法，便是在jsp页面中写Java代码，让Java来获取项目的根路径，然后通过绝对路径的办法引入资源文件。
我们在jsp页面的开头加上以下代码：
<% String path = request.getContextPath(); int port = request.getServerPort(); String basePath = null; if(port==80){ basePath = request.getScheme()+\"大众://\公众+request.getServerName()+path; }else{ basePath = request.getScheme()+\公众://\"大众+request.getServerName()+\"大众:\公众+request.getServerPort()+path; } request.setAttribute(\"大众basePath\"大众, basePath);%>
request便是所谓的JSP九大隐式工具中的一员，实在JSP便是Servlet，你可能学过Servlet，那么该当很清楚request是什么意思。往后我会单独来讲解一下关于JSP的东西，现在先连续往下说吧。
request.setAttribute(\"大众basePath\"大众, basePath) 表示将得到的basePath（项目根路径）存放到request浸染域中，你可以把request看做一个HashMap，或者一个JSON工具，都可以。
反正，这句话一写，就解释request浸染域中已经有了basePath，我们在JSP页面的其他地方就可以获取到了。
<div class=\"大众banner\"大众> <div class='8e09f2c3393e2d37 content'> <ul> <li class='f2c3393e2d3796a3 fl'> <a href=\"大众javascript:void(0)\公众> <img src=\"大众${basePath}/static/img/5.jpg \"大众/> </a> </li> <li class='393e2d3796a3d72b fl'> <a href=\"大众javascript:void(0)\公众> <img src=\公众${basePath}/static/img/1.jpg \"大众/> </a> </li> <li class='2d3796a3d72bc67d fl'> <a href=\"大众javascript:void(0)\"大众> <img src=\"大众${basePath}/static/img/2.jpg \公众/> </a> </li> <li class='96a3d72bc67d8456 fl'> <a href=\公众javascript:void(0)\"大众> <img src=\公众${basePath}/static/img/3.jpg \"大众/> </a> </li> <li class='d72bc67d84562ab3 fl'> <a href=\"大众javascript:void(0)\"大众> <img src=\"大众${basePath}/static/img/4.jpg \公众/> </a> </li> <li class='c67d84562ab3dcfa fl'> <a href=\"大众javascript:void(0)\"大众> <img src=\"大众${basePath}/static/img/5.jpg \"大众/> </a> </li> <li class='3600e0560803b0f1 fl'> <a href=\公众javascript:void(0)\"大众> <img src=\"大众${basePath}/static/img/1.jpg \"大众/> </a> </li> </ul> <span class='e0560803b0f1fdae banner_left'><i class='0803b0f1fdae8b9d btn_left'></i></span> <span class='b0f1fdae8b9d4b06 banner_right'><i class='fdae8b9d4b068b45 btn_right'></i></span></div>
这样就能访问到了。
刚才还忘了一样东西，便是旁边按钮的图片，也把它拷贝进来。
引入
.btn_left ,.btn_right{ display: inline-block; width: 21px; height: 150px; background: url(${basePath}/static/img/banner_tb.png) no-repeat; position: absolute; left: -38px; top: 90px; opacity: 0; transition: all ease 0.6s; cursor: pointer;}
顺便把banner图往上一点：
.banner { height: 400px; margin-top: 2px; overflow: hidden;}
把js代码也全部拷贝过来吧。
var leftBtn = $('.btn_left').eq(0); //左按钮var rightBtn = $('.btn_right').eq(0);//右按钮var ul = $('.banner .content ul').eq(0); var index = 0;var timer = null; var imgwidth = $('.banner .content ul li').width(); //获取轮播图片的宽度var len = $('.banner .content ul li').length - 2//获取统共的图片数量rightBtn.on('click',function(){ clearTimeout(timer); //定时器清零 timer = setTimeout(function(){ index ++; movePicture(); },500); });leftBtn.on('click',function(){ clearTimeout(timer); //定时器清零 timer = setTimeout(function(){ index --; movePicture(); },500);}); function movePicture(){ $('.banner .content ul').animate({'margin-left':-imgwidth (index+1)},1000,function(){ if(index == len){ $(this).css('masrgin-left',-imgwidth); index = 0; } if(index == -1){ $(this).css('margin-left',-imgwidth len); index = len - 1; } });}
创造一个小BUG，当我一贯点击下一张，移动到末了一张图片的时候（也便是第一张图片，由于我们在末端加上了第一张图片），第二张图片（有的苹果那张）没有自动衔接上去。
这是咋回事呢？
有BUG不要怕，去找缘故原由就行了。
经由检讨，我创造了一个单词的拼写缺点：
原来是margin-left写错了。
OK，更正后就精确了，我顺便把demo页面也改好了。
function movePicture(){ $('.banner .content ul').animate({'margin-left':-imgwidth (index+1)},1000,function(){ if(index == len){ $(this).css('margin-left',-imgwidth); index = 0; } if(index == -1){ $(this).css('margin-left',-imgwidth len); index = len - 1; } });}
改正就行了，额，小细节不要在意。。。
banner图这样就差不多了，下一节开始做上岸功能。我先把页面画好，往后页面的绘制我就不先容得这么详细了，重点还是以Java为主。
