关于第一种划动切换图片的理解
来源:5-2 滑入滑出的第一种实现方式--实现滑动功能
粉墨登场
2021-01-20 21:39:29
问题描述:
老师你好,第一种划动切换图片的理解,我感觉我完全搞明白了。首先要确定当点击左侧或者右侧按钮时,到底是往什么方向运动,因为就是依靠定位的left属性值操控的,所以首先搞明白当left值为正数值时,是从左往右运动,也就是远离左边,靠向右边,而当left为负数值时正好相反,从右往左运动,远离右边,靠向左边。搞明白了这个之后,正是因为left属性值在正数或负数值的情况下运动方向是相反的,因此需要确定下来到底是往哪个方向运动,因此在点击左侧和右侧按钮时,传入了第二个参数,左侧按钮是1,因为left的正数值是从左往右运动,因此让运动的距离乘1保证是正数,右侧按钮为-1,从右往左运动,因此让运动的距离乘-1保证是负数。在定义_slide函数时,第二个参数direction参数就用来接收确定运动方向的保证数值。那为什么底部小圆点不传第二个参数呢?因为左右两侧按钮点击时一定是固定的方向,一次只能点击一个按钮。点右侧按钮一定是下一张,点左侧按钮一定是上一张。但是小圆点点击时光靠参数没法确定具体的运动方向,因为可以四个小圆点任意点击,因此在_slide函数中,使用if判断了三种情况:1. if(this.$currentIndex === index) return; 如果显示的图片索引与被点击的小圆点索引相同,说明点击了对应着当前显示图片的小圆点,没有任何效果,因此直接return退出函数,还能减少性能消耗。(这里只能是点击小圆点才会触发这个判断条件,左右按钮点击是一定会切换图片的,不存在相同的情况)。 2. if(!direction) {
if(this.$currentIndex < index) {
direction = -1;
}else if(this.$currentIndex > index) {
direction = 1;
}
}
第二个判断条件就是为了确定当小圆点被点击时,到底是往什么方向运动,如果被点击的小圆点的索引大于当前显示图片的索引,说明要显示的图片是在后面的,也就是在右侧,因此是从右往左运动,left应该是负数值, 相反的情况就是要显示的图片是在前面,也就是在左侧,因此是从左往右运动的,left为正数值。 3. this.$items.eq(index).removeClass('transition').css('left', -1 * direction * this.itemsWidth);所有可切换图片的按钮运动方向确定了以后,就是让准备显示的图片在父容器外的左侧还是右侧等待,这句代码就是为了设定位置的。大家想一下如果是点击右侧按钮那是不是准备显示的图片应该是在父容器的右侧,贴着右边框等待的?所以是 -1 乘以 direction 乘以748,负负得正,再乘以748就等于748,这时准备显示的图片就在父容器的右侧了(因为left值为正数值时是朝右移动,所以准备显示的图片会在父容器的右侧),这样子当切换时,准备显示的图片left直接为0,就正好显示在父容器中了,而离开图片的left值是-1 乘 748px,这样看起来给人的视觉效果就是当前显示的图片朝左边移动走了,而准备显示的图片从右边移动进入到了父容器中了。 点击左侧按钮也是一样的道理,反过来而已,准备显示的图片在父容器的左侧等待,切换时看起来像是离开的图片朝右边移动走了,准备显示的图片从左侧进入了父容器中。 最关键的点在于搞清楚定位中的left值在正数值和负数值的情况下是朝什么方向运动的。 最后再添加小圆点active的样式,并且让当前显示图片的索引值成为现在显示在父容器中图片的索引。 当准备显示的图片移动到指定位置时,去掉transition过渡属性,使其立刻到达指定位置,准备进入,再设置定时器,等准备显示的图片到位后,再执行切换的效果,这样视觉效果就实现了头尾无缝切换了。 视频中的老师技术确实可以,从第一个组件化下拉菜单就能看出来,$.extend整合对象,$.proxy() 给指定函数传入参数并且可以解决在构造函数中的事件this指向重叠的问题。 请老师仔细看一下说的这么多理解的都没问题吧?
1回答
好帮手慕夭夭
2021-01-21
同学你好,理解的都正确,老师竟无法反驳。优秀!优秀!优秀!
祝学习愉快~
相似问题