00:00
好嘞,各位同学。那么咱们刚刚讲到了获取banner的数据,但是在讲咱们项目之前,咱们呢,先把swaper稍微复习一下。好吧。那swaper呢?那咱们就直接去一下他的官网当中,咱们看一下直接搜SW swa。SPS。那首先说swaper是一个什么?是一个小插件。它主要适用于PC端和移动端。而且呢,主要干什么,主要是搞轮播图了。这玩意儿的好处是啥呢?一定要注意,不管是PC端还是移动端都可以用。OK吧,而且swaper最新的版本是几的是五,但是要注意咱们最好还是先别用最新的,咱先用谁的,用SWAPER5。OK吗?OK吧,那首先说外主要的作用啥,就是经常搞这种PC端或者移动端的轮播图。对不,那当然,那它是一个JS库啊,那咱们在用之前,你是不是得把外per先获取。
01:06
对吧,所以说咱们先在这儿呢,先下载一下swap对不?那当然它有六版本的,也有五版本的,但老师说一下,你先用五版本的,因为五版本比较稳定一些。所以说咱们把它呢,下载了,下载一下。就把它的压缩包,因为它这里面包含了GS业务逻辑和什么,和这个这个这个CSS。对不,那所以说啊,来,咱们把这个压缩包呢,咱给它放到咱桌面当中,把咱们需要的东西呢,给它找出来。来,这个老师在文件夹中打开来看,这老师给他拽住。走,这个老师呢,给他解一个压。就放到咱的桌面当中吧,因为咱们需要它里面的这个GS和CSS,哎呀呀,删多了这个老师呢,再给他返回过来swap。这儿。对不行,那咱们找找啊找找。那一进来之后呢,说老师找哪个文件夹啊。
02:02
找哪个文件夹,老师告诉你找package。对不?Package当中有啥有GS你看吧。对不以及也有什么,也有CSS。对吧,行了,那这个呢,老师呢,单专门的建一个文件夹,这个就咱们专门讲查叫做swaper的基本使用,S WIP swa的基本的使用,这个很简单,因为以前咱们也学过,所以说老师带你们稍微呃巩固一下就行了,好吧,好看这啊,那首先说咱们需要什么,需要它的GS,那咱们呢,就直接把JS和CSS捞走就行了。OK吧,就把这俩给他捞走,CTRLC。之后呢,把它捞过来,CTRL位。好了,那也就是说这个文件夹呢,咱们就不需要了,给他诶干掉好了,给他拽起来。来看这。那那当然啊,咱们的需要有一个静态页面,那咱来一个叫做index.html。
03:01
OK,好了,那咱们看一下,你就记住这玩意儿是为了方便开发,所以说他让你学起来不会难的,那老师问你啊,你说咱想看下外per的基本使用,你说咱点哪。这里一定要注意它最新版,最新版本是六,咱看的是五,因为五比较稳定,你在哪,是不是中文叫程。对不,中文教程当中,在这你看它是不是有个swaper使用,那就点进来就行了,这就是swap的一个基本使用了。OK,不,老师再说一下哪个位置是中文教程外per的基本使用,你晚上的时候一定要把这给我稍微看看。OK吧,好,咱们看它怎么用啊,读读。第一个。首先呢,加载插件需要用到的文件有这个GS和CSS。不同wap版本用到的文件名略有不同,可以进行下载,啥意思?你就读完这句话啥意思,是不是需要你在静态页面当中引包,引入这个JS和CSS?
04:01
对不,那所以说来咱们引入一下,引入咱们的JS script应该是咱们点杠GS下的script。那咱们就找一个swaperin.GS吧,对吧,那以及引入咱们的钥匙link。它应该是点杠CSS下的swaper in.CSS那这不就是第一步吗,包吗?那这块一定要注意,在静态页面和咱们脚手架项目当中都是一样,你都需要有swap swap这个包。以及你要引入它的GS和CSS,这都是一样的,来咱们再看第二步看啥。看着啊,第二。把HTML的内容呢进行展示,那当然HTMLCSS也得有,对不?老师问你一件事啊。就这里的标签的名字能给老师瞎写吗?就这个类名。这个类名能不能瞎写?
05:03
诶,老师再问一遍,这个类名能不能瞎写?哎,老师问一下这里的类名能不能瞎写,不能瞎写啊,为啥?因为人家的样式已经给你写好了,类名都给你写好了,这能懂不?这能懂不?你这个类名不能给我瞎写。OK,不好嘞。那咱们再看走第三步干什么说?你呀,可以给swaper定义一个大小,当然不要也行,啥意思?你看它选中了一个类名叫swape container这样的一个容器,那不就是最外层的这个盒子吗?给它设置了一个宽,设置了一个高,他说当然不要也行,那咱就不要。OK吗?就咱这个盒子大小,咱就不要了。OK吧,看第四步初始化外看这是不是GS了。这里老师要说一下的。Swaper这个插件对外暴露了一个swaper构造函数,但是一定要注意。
06:05
一定要注意。在你new这个swap实例之前,你网页当中的这些结构必须得有。你看这句话对不对?老师先把它粘过来啊,先把它粘过来。看这老师呢,先给它折上。这块一定要注意,这块就是在动态的操作这个这个轮播图了,这块一定要切记。就是当页面中的结构已经有了的情况下,经有了的情况下。你在初始化外实力。初始化swipe实力。就这句话能不能懂啥意思,也就说你最基本你结构得有了,你有了才能操作到,是不是才才能通过GS操作到,这句话能不能懂。那当然,它默认是垂直方向,咱们先看长成什么样子。
07:00
来老师先给你运行一下,看这。看这当然咱现在这个轮播图是垂直的,因为咱们应该知道它默认是有垂直跟水平的,默认是是水平的,所以这块你给它去掉direction是方向,默认就是水平。你看吧。咱先把这先看一下,你看是不是水平的。这个还是给他一个大小,要不看着太难看了。这老师还是给他来一个类名。CTRLC。这咱稍微写点儿样式。你不写,样式有点难看啊。这咱给他来一个宽度,给他来个600吧。高度呢,咱给他来一个400。对不要稍微好看一点啊,看这刷新看这。那首先说direction,咱刚刚删掉的这个属这个配置项是干啥的,是是搞他这个方向的。它默认就是水平的,但是他刚刚给咱写的是垂直的。OK吧,错,你删了,默认就是水平。咱们再看看这它这块有个loop loop是什么意思,开启循环模式,什么叫循环,你看老师往这边点,一直是不是可以往那边点,这个能懂不?
08:07
这能不能走,就是开启循环模式,你看吧,这小点是不是一直可以走。那如果你这会改成false,那就不是循环模式了,所以你点到第三个它就结束了,你看吧。对不?是不是点不了了。这能懂不?所以这块咱给他来个处就行了。以及他说如果需要飞热器,你给来个飞热器,飞热器谁是那个小球球,咱们需要。那以及还有左右的前接按钮咱们也需要,就这个俩按钮也需要,但是底下这进度条咱不用说,这块代码咱就给它干掉了,这块咱不要,那以及结构你也得删,这个滚动条咱不要。你看,这不就是一个简易的轮播图吗?这个能懂不?这个能不能有点感觉吧,这玩意咱曾经学过啊,老师带你们再搞一下子有点感觉吧。但是这里面呢,老师呢,得说一件事,看这。
09:00
你看这,你看老师说这句话对不对,你看这样。如果说你不拗这个swaper实力,它是没有这些动态行为,你看吧,它就是一个静态的。你看这样。如果说你不new swaper实力,它就是一个静态的。对,不,但是如果你要newwaper这个实例,就可以给咱们这个轮播图加上一些动态的效果。对不?但是这里一定要注意,一定要注意,你看老师说的这句话对不对。在newwaper实例之前,你务必网页当中带有这些结构。就这句话能不能理解?老师写一下子。就是在new s wiper实例之前。页面中的结构必须得先有结构。必须结构,哎,结构。B,呃,结构写错了,哎,结构必须得先有,为啥?
10:02
因为他要拿到这些真实的道,是不是进行操作,给他来一些动画。这句话很重要。我再说一遍,这句话很重要,绝对学过,别说没学,绝对学过。你想应该碰过盗墓的时候也学过,还没学过你们就跟那杠精是绝对学过。这块一定要注意,老师再问一遍,就这句话你能不能理解,在newwaper实例之前,就在new它之前,你页面当中必须得有结构。最能懵懂,因为你想他没有结果,我怎么操作到。对不,你看我我我现在你看咱以前学过GQ,你看现在无非就是给它加上啥,加上animate,咱就举个例子,是相当于GQ到animate给来个动画。但是前提是你得有,有道了我才能拗,就举个例子,你没有道呢,你这块怎么获取这个跟标签,我怎么获取里面的子节点。
11:00
就这句话能不能懂,能懂给老师扣一个一。这句话能不能懂?能懂的给老师扣一个一。就是你在new swap之前必须得有结构,你没结构我GS怎么玩do?OK吗?就举个例子,你结构都没有呢,我怎么获取这个容器啊?对不,我怎么给这些子节点添加动画?所以说在new swa之前必须得有结构,这句话很重要。OK吗?好嘞,那这里面是什么,是配置对象配置到刚刚也说loop是什么,开启循环模式,刚刚也看见了,是是不是就循环模式。对不以及分页器,这不就分页器吗。对不,以及左右按钮的动态行为它都有,这不就完事了。对不但是这里老师说一下子啊。他的这个配置对象是没有商量的余地,就跟voe的配置对象是一样,没有商量的余地,你K必须写对,但是这些东西一般去官网抄就行。
12:04
这块老师问你,你说这块在干啥,是不是在传这个根节点,但是要注意这块有两种写法,第一种你传选择器是可以的,第二个传真实的道理,你看老师这么写也是一样,你看。document.query selector a query selector,我传真实的盗墓节点也是一样,你看吧。对,不但是今儿你得有点啊,老师传真实的道也是一样的,你自己看一下,你看效果是一样。说老师你咋知道呢,那我也是看啥,我也是看官网的,你看嘛,他这不有API吗。初始化swaper的时候,你看它第一个是传输容器。容器叫swipe container,你可以传啥?你可以传节点,也可以传字符串。这儿能摸到。这能不能懂,就是第一个参数,你可以传标签,也可以传string string就是选择器吗?或者节点。所以效果是一样,就这能不能走。
13:03
能不能懂,能懂给老师扣一个一。对吧,还有一个注意事项是什么,就是第一个参数。就是这个容器的这个参数。可以是字符串,也可以是真实的倒节点。OK吧,好嘞,这是外per的基本使用。
我来说两句