说明
本教程是,原文章发布系统教程的精编重制版,会包含每一节的源码,以及修正之前的一些错误。因为之前的教程只做到了评论模块,很多地方还不完美,因此重制版会修复之前的一些谬误和阐述不清的地方,而且,后期我会考虑完成该项目的后台管理。希望本教程提供的内容,可以成为JavaWeb初学者一套较为完整的练手项目。
这一节,我们来整合一下资源文件。
现在,我们把这个已经做好的banner区域搬到项目里。
在WebContent目录下新增一个static文件夹,这里存放各种静态资源文件。
这个文件就是用来存放静态资源文件的,项目当中一般都会有这样的一个文件夹。里面存放的就是js,css,img等。
我们在这里面添加js和css文件夹。
因为刚才的页面中用到了百度资源库里的jQuery文件:
http://libs.baidu.com/jquery/2.0.0/jquery.min.js
现在我们直接将这个url用浏览器打开,你会看到一大堆代码,别慌,少年,这个就是jQuery的源代码了。我们要做的就是把这一份代码copy一份到我们的本地。现在,你要做的就是在js文件夹中创建一个空的jquery.js的文件。
接着,把刚才页面中的代码全部拷贝进去,是的,放进去就成,你无须关心这些代码是什么意思。
完成之后,恭喜你,现在你的本地已经有jQuery这个框架了。也就是说,下次再要使用jQuery相关方法的时候,你就不需要去网络上引用相关资源了。
正式使用轮播图
接下来,我们将之前写好的lunbo.html中的相关资源放到index.jsp中。
准确来说,就是把class为banner的div拷贝一份,粘贴到这个地方:
然后,把对应的css和js全部拷贝过来。css拷贝到index.jsp中的style标签块,js就连着script标签块一起拷贝过来吧,放在页面的底部。
最后,别忘了把jQuery的引入改回来。
<script type="text/javascript"src="static/js/jquery.js"></script>
好的,这一讲到此结束。
源代码: