【手把手】JavaWeb 入门级项目实战 -- 文章发布系统 （第三节）(1)

最后

给大家送一个小福利

附高清脑图，高清知识点讲解教程，以及一些面试真题及答案解析。送给需要的提升技术、准备面试跳槽、自身职业规划迷茫的朋友们。

本文已被CODING开源项目：【一线大厂Java面试题解析+核心总结学习笔记+最新讲解视频+实战项目源码】收录

需要这份系统化的资料的朋友，可以点击这里获取

差不多就是这个意思，上代码：

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.6.8 整合资源文件

现在，我们把这个已经做好的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.6.7 引用资源文件

在整合好资源文件后，如何将这些资源文件导入我们的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页面的其他地方就可以获取到了。

• 
• 
• 
• 
• 
• 
• 

  这样就能访问到了。

  刚才还忘了一样东西，就是左右按钮的图片，也把它拷贝进来。

  

  引入

  .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;

  }

  });

  }

  最后

  光给面试题不给答案不是我的风格。这里面的面试题也只是凤毛麟角，还有答案的话会极大的增加文章的篇幅，减少文章的可读性

  Java面试宝典2021版

  

  

  最常见Java面试题解析（2021最新版）

  

  

  2021企业Java面试题精选

  

  

  本文已被CODING开源项目：【一线大厂Java面试题解析+核心总结学习笔记+最新讲解视频+实战项目源码】收录

  需要这份系统化的资料的朋友，可以点击这里获取

  7)]

  [外链图片转存中…(img-uGctw8bs-1715484321267)]

  最常见Java面试题解析（2021最新版）

  [外链图片转存中…(img-0qS8h1nL-1715484321268)]

  [外链图片转存中…(img-zNoqh47n-1715484321269)]

  2021企业Java面试题精选

  [外链图片转存中…(img-UzKWXi5n-1715484321269)]

  [外链图片转存中…(img-MhhPUsIT-1715484321270)]

  本文已被CODING开源项目：【一线大厂Java面试题解析+核心总结学习笔记+最新讲解视频+实战项目源码】收录

  需要这份系统化的资料的朋友，可以点击这里获取