关于划入划出切换效果的问题

来源:5-2 滑入滑出的第一种实现方式--实现滑动功能

粉墨登场

2021-01-20 17:20:20

问题描述:

老师你好,第一种划动切换的效果,不是很明白到底什么意思,跟之前医院挂号项目的思路不一样。老师能不能详细说一下到底什么意思

相关代码:

// 根据不同的切换效果调用相对应的函数,_slide由to属性调用.
Slider.prototype._slide = function(index, direction) {

// 如果点击小圆点时,就是被点击的小圆点所对应显示的图片,那不执行下面的代码,直接return 退出函数
if(this.$currentIndex === index) return;


// 确定划入划出的方向。如果第二个参数没有,说明是点击底部小圆点切换的
if(!direction) {

// 如果当前显示图片的索引小于要进入的图片的索引值,那就应该整体往左划动
if(this.$currentIndex < index) {
direction = -1;

// 相反,如果当前显示图片的索引值大于要进入的图片的索引值,那就整体往右滑动
}else if(this.$currentIndex > index) {
direction = 1;
}
}



// 设置指定划入幻灯片的初始位置
this.$items.eq(index).css('left', -1 * direction * this.itemsWidth);



// 当前幻灯片离开可视区域
this.$items.eq(this.$currentIndex).move('x', direction * this.itemsWidth);


// 指定幻灯片进入可视区域
this.$items.eq(index).move('x', 0);



// 激活小圆点的active样式
this.$indicator.eq(this.$currentIndex).removeClass('slider-indicator-active');

this.$indicator.eq(index).addClass('slider-indicator-active');


// 切换完成后的图片索引赋值给当前显示图片的索引,同步一样
this.$currentIndex = index;
};



相关代码:

这是点击按钮时切换图片的点击事件
​on('click', '.slider-control-left', function() {

// 调用to属性,该属性是切换图片效果的方法:_fade或者_slide函数,将当前显示图片的索引值相减 1,当作参数传入。传入之前先使用 _getCorrectIndex函数判断索引值是否合法
self.to(self._getCorrectIndex(self.$currentIndex - 1), 1);


}).on('click', '.slider-control-right', function() {

// 调用to属性,该属性是切换图片效果的方法:_fade或者_slide函数,将当前显示图片的索引值相加 1,当作参数传入。传入之前先使用 _getCorrectIndex函数判断索引值是否合法
self.to(self._getCorrectIndex(self.$currentIndex + 1), -1);


// 使用事件代理给底部小圆点绑定点击事件,被点击时,相对应的图片显示出来
}).on('click', '.slider-indicator', function() {

// 被点击时调用to函数,将当前被点击小圆点的索引值经过函数_getCorrectIndex的合法判断后当作参数传入。
self.to(self._getCorrectIndex(self.$indicator.index(this)));
});

为什么点击左右按钮要传第二个参数,点击底部小圆点就不用。 是因为点击左右切换时是可以确定具体运动的方向吗?比如点击右侧按钮,那图片整体就是从右往左运动,因此传入-1, 因为left值是要往左边运动。点击左侧按钮正好相反,是从左往右运动,因此传入1。麻烦老师详细讲解一下_slide函数每一步代码的用意及绑定点击事件时为什么左右按钮传了第二个参数,点击底部小圆点没有传第二个参数的原因。

写回答

1回答

好帮手慕久久

2021-01-20

同学你好,解答如下:

1、轮播图的实现思路比较多,医院挂号哪里的思路比较简单,而这里,老师又介绍了一种思路,所以同学别急,慢慢来。

2、点击左右按钮传入第二个参数是因为此时能确定具体的方向(同学的理解是对的)。点击左右按钮时,整体的运动方向同学理解也是对的(点击右按钮,整体左滑,为-1;左按钮相反)。而点击小点时,在点击的一瞬间,我们是无法确定它往哪边滑的,所以需要使用一种方式标记一下,当不知道方向时,要执行一些代码,计算出往哪边滑。因此就采用了当点击小点时,不传第二个参数,然后在代码中,通过判断是否有第二个参数,来做一些事情(判断方向),如下:

http://img.mukewang.com/climg/60080155095fcdf710580463.jpg

3、同学_slider中的注释都是对的,老师给你屡下实现思路:

这里将所有幻灯片都设置了absolute定位,让它们重叠在一起。初始时,让第一张幻灯片的left值为0,进入视野区,即初始显示第一张。其他张,都设置left为负值,让它们在视野外等待:

http://img.mukewang.com/climg/60080275095a0a3c18650840.jpg

当点击右按钮时,第一张图通过改变left值,实现移出视野;第二张图也通过改变left值左移,但是是移入视野:

http://img.mukewang.com/climg/600802d6090ef23f12760828.jpg

http://img.mukewang.com/climg/600802eb0953081113960848.jpg

这样就实现了一次切换。

即,切换时,需要让当前张移出,让下一张从右侧待定位置移入:

http://img.mukewang.com/climg/600803b209687bd210040367.jpg

同学再理解一下。

祝学习愉快!

0

0 学习 · 14456 问题

查看课程