说明

本教程是,原文章发布系统教程的精编重制版,会包含每一节的源码,以及修正之前的一些错误。因为之前的教程只做到了评论模块,很多地方还不完美,因此重制版会修复之前的一些谬误和阐述不清的地方,而且,后期我会考虑完成该项目的后台管理。希望本教程提供的内容,可以成为JavaWeb初学者一套较为完整的练手项目。

这一节,我们来整合一下资源文件。

现在,我们把这个已经做好的banner区域搬到项目里。

在WebContent目录下新增一个static文件夹,这里存放各种静态资源文件。

image.png

这个文件就是用来存放静态资源文件的,项目当中一般都会有这样的一个文件夹。里面存放的就是js,css,img等。

我们在这里面添加js和css文件夹。

因为刚才的页面中用到了百度资源库里的jQuery文件:

http://libs.baidu.com/jquery/2.0.0/jquery.min.js

现在我们直接将这个url用浏览器打开,你会看到一大堆代码,别慌,少年,这个就是jQuery的源代码了。我们要做的就是把这一份代码copy一份到我们的本地。现在,你要做的就是在js文件夹中创建一个空的jquery.js的文件。

image.png

接着,把刚才页面中的代码全部拷贝进去,是的,放进去就成,你无须关心这些代码是什么意思。

image.png

完成之后,恭喜你,现在你的本地已经有jQuery这个框架了。也就是说,下次再要使用jQuery相关方法的时候,你就不需要去网络上引用相关资源了。

正式使用轮播图

接下来,我们将之前写好的lunbo.html中的相关资源放到index.jsp中。

准确来说,就是把class为banner的div拷贝一份,粘贴到这个地方:

image.png

然后,把对应的css和js全部拷贝过来。css拷贝到index.jsp中的style标签块,js就连着script标签块一起拷贝过来吧,放在页面的底部。

最后,别忘了把jQuery的引入改回来。

<script type="text/javascript" src="static/js/jquery.js"></script>


好的,这一讲到此结束。

源代码:

image.png

链接:https://pan.baidu.com/s/1EcwSUDbhX2bKthj58I52Sw 

提取码:11op 

复制这段内容后打开百度网盘手机App,操作更方便哦