29.尚硅谷_jQuery_平滑翻页.avi原创

呃，我们上午呢，我们就现在去做一个做一个练习。这个练习大家应该做过是吧，没有？类似的效果做过吧，好了，就当他完全没做过啊。你可以换成你喜欢的图片啊，反正这是我喜欢的图片。

啊，这个页面和样式呢，就已经就写好了啊，但这里面呢，说一个说几个关键的点啊，大家看到。先我们来对这一个布局和样式做一个简单的说明。首先啊，这个中间的这一个部分呢，这个外部有一个div看到了吧，这个div只占哪一部分呢？只占这一部分能不懂，也是它的宽和高，你是不是有线在它的限定了对不对，零和凹度这个什么，这个实现什么效果，是不是居水平居中啊啊水平居中好了，这一个啊overflow等于黑的。什么效果好，这个就得看下一个了，大家看到下一个，你看下一个啊，这个地方啊，这一个里面的这个div list。

它的宽度3500，一共这个地方它有几个image。五个五个3500，那每一个是多宽700，那700啊600吧，700啊不好意思，700怎么算的呀。啊，六六五六三十，那就这里面写的有点小问题啊，这一共几个。五个五个每一个应该要，每一个要跟它的宽度要正好是吗？正好一样啊，它刚好显示吗？那就是我写的有点小问题。看一下啊，6656应该什么啊，六我现在是五张啊，现在是五张。这是这数学的小算法都算不了这五个。不五六三十嘛。这样的话才是刚好是好的。

再说一遍啊。对吧，那也就是说大家看看啊，我们的这个div实际上宽度是不是比外部的这个content的div是不是要宽呢？但是你看见所有的图片了吗？没有原因是什么overflow等于什么黑的。是不是就出来了？好，那下面我就要问大家了啊，我想让这个图片动起来。该怎么办？给我的这个的添加什么属性。添加什么属性？对我这个list list的这一个div添加什么属性，这个属性的。那的属性假设我先为零啊，我先为零。平相当于是不是跟没加一样，那下面啊，我要想让看到啊，我要想让它图片向左移动，我应该是增大还是减小减小啊，懂没有。

是不是在动？看到吧，那翻页是怎么做的，是不是就是让这个life的值不断的减小或者增加呀，如果是减小，那就向这边移，向左移对不对，那如果我增加了向右移。先把这个基本的道理搞清楚。我要向。我问大家一个啊，我要向左，向左翻一页，我应该移动多少是吧？600，那是正的600还是负的600，负的600吧，也就是说我要看到下一张图片对不对？我要看到下一张图片，它不就像左移吗？

能不能懂，也就是说我要翻到下一页，它需要耐的值要减少什么600，要减去600对不对，那反过来说，我要向点向左看到上一张图片呢。我要看到上一张图片，它实际上耐的值是增加了多少，增加加多少也是600。大概道理懂吧，你只要懂得了这个基本的道理，那后面的事情就好办了。啊，不过呢，最终我们的这个这个这个肯定还是要overflow的是吧。现在说看来这个中间的一个状态啊，再刷一下啊，这个呢是已经写好了啊，它有哪些功能跟大家说一说啊，首先最最基本的功能是点击这个向左向右的按钮。

能够翻页，向上翻页或者向下翻页，那除了这个功能还有什么功能呢？啊，还有它能自动翻页。能不能看到每隔三秒钟，就如他假设它每隔三秒钟，或者这里面我好像涉及的一秒钟啊，每隔一秒钟或者几秒钟，指定的秒数，它就相就翻到下一页。而且他还是循环翻译什么意思。现在我在最后一页。啊，我点一下向右呢。进入了一页第一页，而且是连续的看到，诶这个怎么做到对吧，如何能做到我的右边，也就是说我现在看到最后一页，其实右边页还有六页有，你没有的话怎么能连续呢。

大家想啊，如果没有的话，他就不可能连续的出来。看到了吗？右边有没有，是不是有一张啊，对不对，这而且这一页这一页图片是第几张图片，第一张图片能不能看到，好，那接着要说另外一个事情，我翻到第一页左边有没有图片。第一张图片的左边有没有图片？有，他是第几张图片，最后一张图片。也就是说，你想想看，我们最终你看到我这里一共有几张图片了。七张图片，但实际上真正只有几张，五张大概呢，本来我是这样一个五张图片，对不对，本来有这五张就够了吧，但是我为了能够实现循环翻页的效果。

我在最左边加的是第一张图片，最后一张也就第五张，是不是我在最右边加了什么第一张？这老师这么一加就能连续搬了，当然可以，就看你能不能想出来了，对吧，啊OK。这个东西有时候就是你要找到解决办法是最关键的。好，你说诶，你看啊看这里。我怎么样才能连续的话呢？譬如说举个例子，假设我当前看到的是这一张。就举个例子来看的玩，看着我假设当前看到的是这一张。那而且呢，我点向右翻页。

那我现在看比啦。看第几张，第一张，因为我当前看到的是5.1版，对不对，5.gp，那向下方是不是看到1.gg，但是我能跳到这里吗。我能停在这里吗？我能不能停在这里？为什么不能停在这里？我为什么不能停在这里，我要停在这里右边还有吗？没有了，那你该怎么办呢？对吧？我就偷偷的默默的背后一旦发现我现在当前跳到最后一张，跳到这个最后一张，那我就瞬间蹦到了一张去第二张。这是第二个位置的图片。他们俩是不是同一张，是不是用户能发现吗？不能用户发现不了，因为我我跟他说过了，你去改变那个name的值，它是瞬间改的。

那么呢，用户根本就不知道你已经跳到别的位置了。用户哪知道这个是用户都是摆设。嗯。你或者说或者说什么叫一个好的应用，就是让更多人觉得你这个应用好，让白痴也能觉得，诶反正随便点点诶可以对吧，你不能说还要用户思考这个案钮我能不能点，这个按钮我要不要点啊，你不能是你老让用户思考才能点击正确，对吧，尽量让用户少犯错误，这样的应用才是好的应用。好了，那有可能我当前已经到了这个1.jpg，好，我有可能是不是点击向左。有没有人有，那我点击向左看到的是哪一张图片，图片五，那是不是会跳到这里来，关键是你能停在这里吗？不能停在这里。你要提到这里向左就是空白了。

能理解吧，那这个时候很简单，我们瞬间跳到哪里去？倒数第二张。用户看到的还是5.jpg。这就是为什么我在左边和右边多加了，一共多加两张图片。这样是不是实现了一个平滑的循环翻页的效果？对吧。大概思想能不能懂啊，先你要明白这个道理，咱才能做，你要这个道理都明白不了做，写代码没有意义。下去以后你也要自己分析一下啊，凭什么我这种方式就能实现一个循环的一个效果。好。来啊，那下面呢，我们就准备来去写。

不用怕啊，其实也并不来，没有你们想象那么复杂。就稍微代码多一点。啊，首先第一步呢，我们还是要去导入这个几块是吧，啊这个我就已经导了啊，导就导了吧，这个这个也不会有多大难度，来我们再来搞一个。我这一次呢，因为代码量比较大，所以呢我单独写成一个文件，我取个名字叫APP点解SAP什么意思。是不是应用啊，我当前这四相呢，是不是个应用，我这个应用的GS，那我诶放在。就放在这吧，那既然都这么写了，那我应该怎么办？啊，创建一个呗，对不对。是不样的，好了啊，这个地方呢，我这样，我我刚才不描述了我一些功能吗？我这里面我就把这些功能点都跟大家写出来，写在这里，我们照的功能一个一个做。

能看着吧，啊能看出来好了，我们现在要用最快的语法写啊，前面的原生的语法，那后面呢，可以去看一看。啊，写代码最好一上来啊，用这块首先写个这个东西是比较好的。啊，一个是我这个里面代码是不是在文档加载完了以后执行，再一个也能起到隐藏的作用。因为我上面写的所有代码不都在这个函数体里面吗？也就是说我在第一变量会污染全局空间吗？不会，这实际上起了两个作用，第一个让你的代码是在文档加载完了以后才执行，这是第一点，第二点能隐藏你的实现不污染全局空间，能不能懂，这是有意义的。好，那我们就一个一个来做，首先我们做的第一个功能是要去实现它。

这是最难的一步。点击向右或者向左的图标，平滑的翻到什么下一页或者什么上一页。先我们需要去把一些需要操作的一些元素。通过j query的选择器给它先找出来再说，我们来看一下需要操作哪些元素。首先啊，我们这一个div，它是到时候需要操作的，为什么说需要操作了，我这地方有一个隐，非常有隐蔽的效果，大家看它现在是不是在定时翻页呀，我的鼠标一放进去。你看还动不动？懂不懂，诶老师你为什么做这种功能呢。你在想嘛，我翻进去是为了干嘛去的，我是看，或者是我要去自己翻译。

对不对，你还在翻页，故意我就感觉我本来你们开始说这个需求很好，我要看，说我确实就是要看，那你不能再动了吧，我想动就动，我不想动他就什么不动。这是探索用户的心理。能不能懂啊，那这个时候我是不是要有一个，那我要移出来了。那是不是就继续动了，那这是不是有一个鼠标移入和移出，那我嫁给谁呢。我这个事件嫁给谁呀，就嫁给他呀，是不是我整个区域。能不能懂，这不就是我的这片区域吗？这片区域吗？不就是我这片区域吗？对不对啊好，那我需要把它。先给它定义出来啊，先定义很多啊，这前面定义啊，准备工作相当于是一些。

家里们可以吧，好，还有一些我们继续往下看。这个里面我需要去操作这个，它为什么操作它，我要操他什么还记得吧。我是不是要给它加一个什么style加一个，而且它的值是不断变化的，对不对。让他移动吗？那么你就让这个list是不是进行移动。所以呀，我需要去找到这个什么。记住啊，等号的左边和右边要有空格。好。但是这图片本身我是不需要操作的，能不能理解图片本身我是不需要操作的。好，下面。

啊，这个这个是什么，这些span大家知道是什么吗。就是那些圆点。看懂吧，这原点，这原点要不要操作。而且是不是统一都加上了点接率，你看嘛，我一点它是不是有变化，所以我要找到所有的什么。这个原点。来它是SPA标签啊，是这个div下面的是SPA标签，我怎么找了，来先定一个变量多了福，我叫point。咱们看看等于。先找到它的负元素，根据ID找，接着是它下面的什么。紫元素失败。懂不懂，好，除了这个啊，还有两个。这两个这什么呀。

是不是两个向左和向右的箭头。那我也需要超过他们了，所以我也把它们定义出来，做好准备工作，其实很有必要。是不是还有一个。好来把这个搞一下好了吧，那下面我们是不是要实现点击以后翻页的效果，那干嘛去先做什么，你说做什么，就是给他加点击监听，让他动呗，给他家点击监听呗。Next点肯方向是吧，这个要干嘛去要干嘛平滑翻到什么下一页。对不对，而另外一个是不是类似的。

那个什么，它是要什么平方，放到上一页，他们就是方向不一样啊。对不对？好，这个可不是一条两条鱼就能搞定的事。是很多条语句才能做，那我应该怎么办？这个实线是很多条语句才能搞定的事，而且我希望调用的是同一个方法最好了，对不对，是不是定义的方法是吧，以前呢，我们可能是先定义函数，是不是再去调用函数，但真正写项目的时候，真正写代码的时候，一般讲很多时候我先写调用，再写定义。先写调用，再定义，我现在干嘛去是不翻译，我取个名字可以说叫next page，但是有可能是next，也有可能是pre。

穿什么？能不能懂，那我下面干嘛，是不是定这个方函数。传一个next，这个是个不值，表示是否是下一页。如果是处。就代表什么四下一页如何破呢？上一页这个翻译过来叫平滑翻页。对不对，而且这一个next现在如果为代表什么，是不是下一页，而如果是first上一页。对不对。能不能理解，能理解好了，那下面我们就要去说了。

那我们翻页频繁翻页到底该怎么做呢？其实跟我们那个滚动有很多类似之处。有很多类似之处啊，OK，也就是说，也就是说大家看啊，他强调先我们也别平滑，你说我怎么样能够瞬间的翻到下一页，看看怎么做。啊，大家看啊。我们现在啊，手里面是不是我要去操作它，是我要操作它先我瞬间来一个啊，我要去操作他要操作它的什么东西。超出它的什么东西，是不是超出它的style样式是不是啊样式它的什么值，Na的值，它na的值为多少呢。那要在当前值的基础上加上或者减去600。

能不能懂啊，也就是说我当前是在某一个位置吧，我怎么样得到当前的life值。是吧，因为现在的这个life值相当于是复原数啊，所以我可以先得到当前的life值怎么着？传一个什么，不是我这里面不不是这么说的啊，我们这里面不有一个叫position吗？大家记不记得还记得吧，就这个。当前最新的live的值，我这里面不有一个position么？Position相当谁了？负元素的一个偏移量吗？而这个地方它最终是不是可以取life，也可以取什么top，我要取什么live，这是不是当前的？啊，就是我们在动词前我取名叫什么呢？Current。

可不可以，可以我有看到了，我还可以求出一个叫偏移量。什么意思呢？一个of side，也就是说我当前要便宜多少了便宜多少。可能是正600，也可能是什么负600，那到底正还是负呢？看什么看next的，如果next的处是正还是负非常关键了，是正还是负正，你这个那的是错的话，是说明我的下一页，下一页是不是向左移动，是不是向左移动，向左移动，你说的是正还是负啊负的负的对吧，那我这地方最好是定义成一个产量，因为是个固定的值。是吧，我叫一个K多少。是不是600能不能看懂，这相当于是不是一页的宽度，能懂吗？

能理解吧，啊，这是一页的宽度来，那也就是说如果它是这个，那下面呢。真的，那你说我该怎么做，我那就等于多少呢，很简单嘛。加上off不就拉倒了吗？对不对，对了吧，只是我也得放在逗号啊，逗号逗号逗号你要写冒号必须放在什么。放在一个对象里面是不是，嗯，可以吧，但是这个移动是什么。瞬间移动了。但是也要试试看看对不对，先做瞬间移动，看看看能不能动啊，是啥，关键时刻到了。刷牙是吧，走。报错来看一下。

他说什么，那诶我这个地方这个life的应该写成什么，是不是一个字符串名称呢？嗯，他去取这个变量，取道啊走，你来。可不可以，可以吧，往前左可不可以。是不，你们说老师你为什么不多点，不多点就出现白色了。可以吧，可以，我们慢慢研究，你别想着老师赶紧解决这个白色的。你先滑动，被我们划起来，你慢慢来嘛，一步步来。现在我们至少实现了瞬间的翻页吧，但不够。但是不够，对不对，我们最终的目标是干嘛实现一个平滑的翻页。平滑翻页是不是要把整个整个这一个off set分解成很那个小的it off set一个一个滑呀，是不是也就说还是跟我们那个昨天做的那个滚动。

是一个操作。也就是说，我们最终要去做这个东西，得先准备一些东西，准备哪些东西，首先我们要知道哪些东西。总的偏移量是吧，总的什么偏移量，也就是说我们到底要做多大偏移，总偏移量是多少，是不是取个名字，其实这个我们已经求出来了，O塞呀，还有一个叫什么总的时间，我们就叫它time吧，可以吧，这个是不是个指定的固定的值。我一指定以后是不是就不变了，那我就来一个time，假设我就等于多少呢？呃，300行吗？400吧，让他看的清楚点，那也就说这一个啊，是一个固定的值对不对，那我完全可以在这里面是不是给他什么，是不是定义在外面。

能懂吧，啊OK，这个是什么意思？翻页的什么，是不是持续时间。能懂吧，翻月的持续时间好了，除了这个还有什么？是不是间隔时间？那么你单元移动的什么间隔时间？那这一个我们用写一个什么名字呢？我叫一个名字叫。PA。等于是不是一个固定的值，我整一个是吧。呃，20行吗？这边可以吧，可以来，那这一个我们也把它给它搞过去。

对吧，啊，在这里面写一个注释，把这个注释呢拿过来。好，下面有这些东西，以后我要计算，我还需要知道什么。单元移动的是不是偏移量，你它距离对不对，能懂不？那我们也就是说计算出I什么。It of等于什么？是不是等于啊？看它除以什么括号啊，Time除以I下划线，看这是不是动态算出来的。

跟上面不太一样吧，这是计算出来的对不对。能懂能懂。这个总的配音量是不是也是计算出来了啊，也是计算出来，我可以这样啊。这个放到下面是吧，这样看起来好一点，上面这两个是不是固定的值，下面这两个是不是要算出来。按照吧，好。那把他们整好以后啊，后面就做什么。后面我们怎么样才能让它移动？怎么样，它不断动，是不是启动什么定时器循环定时器不断更新啊。的什么值？嗯。这意思吧啊，而且还有一个到达目的地的时候干嘛到达目标处。

他把了，是不是停止电视。其实跟我们昨天其实是一个老板没有区别啊，停止定时器。只是稍微的啊，有些东西不太小，不一样啊，思想是一样的。那好吧，那我们现在是不是又来居住了？好，来记住啊，我们来看一下这个是不是定义出来了，这个也定义出来了，Off set of set，哎这个地方来我先把set先定义一下这个啊，来这不是总的偏移量吗。是吧，那我就定义一个of是吧，Set啊开始了等于几，我就看它等于零几面，接着我后面是不是根据我的这一个X的进行计算。

这个叫什么？是不是计算OS的？能走吧，你先要有准备才计算嘛，计算off。好，这个还要吗？不要了，来啊，后面的不管啊。下面。下面呢，我们这个地方有一个啊，有一个有一个current啊，我们还要计算什么，完了以后还要计算椎。嗯，计算这个item of对不对。是不是就算他呗。对吧，好，那计算它怎么计算呢？我一个I，那我们把这个拿过来得了吧，好吧。这个刚刚写过了，就不用再写了。可以了吧，嗯，可以了。来下面啊，下面我们准备干嘛去说。先不用管这两个啊，先不用管它，先留着放着啊，先不用管它们，好，接着我们说启动什么循环定时器，不断更新它对不对，那我去干嘛去。

做呗，你就做啊，把这给我拿过来写。因为最终是不是最后要停止啊，所以要把这个ID给他什么留下来，Set interval function，接着了时间。什么？是吧，在这里面干嘛哟。是不是要去不断的去更新这个多福list left值，我是不是要做这句话。对不对，有没有问题。没问题吧，没问题，但是呢，这个地方啊，这里面大家看到啊，大家看一下我这个地方我是卡的，那提前是不是可以把什么。

把这个卡是不是求一下这个是什么意思。是不是得到当前的什么life的值？你只有得到当前以后是不是才能不断的更新。是还是不是啊是的吧，好，那下面啊，我在这个里面是不是就不断的去做更新的操作是吧。啊，但是这么整行吗？不行，你不是这么整的，你要这么整，那你就变一次，后面再也不会变了这个值。能不能理解，你应该这么写？怎么写的叫current等于谁也就说你你写个这个行吗？你说你这么写的行吗。

行不行不行不行，因为这个值在循环，在你这个定时器不断执行过程中，它会变吗？不会变，这个值会变吗？那不完蛋了吗？一动一下再动了。能不能理解你不要，你不应该是不断累加吗？能不能理解这个时候我应该传什么？我这个地方应该弹什么。是这个意思。翅膀。能不能理解，就是我是不是计算最新的。啊，这个叫什么，计算出最新的，看最后是吧，看给他什么。是不是设置进去。啊，设置left。好，关键现在我怎么知道他到达目标规则了？

是吧？我怎么知道他到达目标位置了？你告诉我。我怎么知道的？OK，这个地方应该还有一个。还有一个，我们叫目标left。叫计算出什么目标。处的left值，这个怎么求？其实很好求，说实话，我定一个名字叫什么呢？它给它left等于什么？你不看你不有一个吗。是不是能不能懂这面好多耐字啊，有一个看耐的是当前的那对不对，没动之前的吧，这个是我要动的一个目标位置吧。

对不对，而这一个是我每一次要移动多少吧，每一个小的单元移动移动多少，这个是我的什么，总的移动需要把他们的关系搞清楚，那下面呢，我怎么知道到达目标位置啊，非常简单嘛。看来不来等等于看，看来不来就说明什么。到达目标位置。对不对对的吧，那到达目标位置我应该干嘛呀。是不是清除定时器，是不是啊，怎么清除传什么。

是不是在的那一停的话，最后他还会不断的去调用这个回调函数吗？不会了，那是不是就执行次，这一次执行完了以后就没了，那这个时候我们清除以后，它就不会再去反复掉了吧，可不可以？可以的吧，啊，可以没问题好。那那现在我们就来看一下，看看它能不能翻啊，能不能翻啊，也不知道能不能翻。刷一下啊，走走可不可以。走开呀，这不挺好的吗？但是这边还不行是吧，我们还没想这个事了，是不是啊，那至少说我们的第一个已经做好了。这是我们的第一个需求，点击向右或者向左图标平滑的翻到什么下一页。

可以吧，可以啊。