有问题请教老师
来源：6-1 按需加载--准备
粉墨登场
2021-01-22 15:01:41
问题描述：
老师你好，当同一个html页面切换两种不同的切换效果时，有问题，我也不知道问题出在哪，因为我是将两种划动切换效果的代码分别放在不同的js文件中，这两个不同的js文件中，fade切换效果是一样的，只有划动切换的效果不一样，请老师帮忙看下。
相关代码：
这是HTML结构
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>幻灯片淡入淡出切换效果练习</title>
<link rel="stylesheet" href="base.css">
<link rel="stylesheet" href="common.css">
<style>
.slider {margin-left: 300px;
width: 728px;
height: 504px;
overflow: hidden;
position: relative;
}
.slider-indicator-wrap {
position: absolute;
left: 50%;
bottom: 24px;
margin-left: -28px;
}
.slider-indicator {
width: 8px;
height: 8px;
border-radius: 50%;
background: #313a43;
margin-right: 12px;
cursor: pointer;
}
.slider-indicator-active {
background: #f7f8f9;
border: 2px solid #858b92;
position: relative;
top: -2px;
}
.slider-control {
display: none;
width: 28px;
height: 62px;
line-height: 62px;
background: #000;
opacity: 0.7;
color: #fff;
font-size: 22px;
font-family: simsun;
text-align: center;
position: absolute;
top: 50%;
transform: translate(0, -50%);
}
.slider-control-left {
left: 0;
}
.slider-control-right {
right: 0;
}
/* .slider-fade .slider-item {
display: none;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
} */
.slider-slide .slider-container {
position: absolute;
left: 0;
top: 0;
width: 1000%;
height: 100%;
background: yellowgreen;
}
.slider-slide .slider-item {
float: left;
}
</style>
</head>
<body>
<div id="focus-slider" class="slider">
<!-- 存放幻灯片图片的容器 -->
<div class="slider-container">
<!-- 这里使用div标签包裹，因为如果直接使用img标签就只能放图片了，扩展性不好 -->
<div class="slider-item">
<a href="##" target="_blank">
<img src="img/focus-slider/1.png">
</a>
</div>
<div class="slider-item">
<a href="##" target="_blank">
<img src="img/focus-slider/2.png">
</a>
</div>
<div class="slider-item">
<a href="##" target="_blank">
<img src="img/focus-slider/3.png">
</a>
</div>
<div class="slider-item">
<a href="##" target="_blank">
<img src="img/focus-slider/4.png">
</a>
</div>
</div>
<!-- 存放下方小圆点的父容器 -->
<ol class="slider-indicator-wrap">
<!-- 下方的四个小圆点 -->
<li class="slider-indicator fl"></li>
<li class="slider-indicator fl"></li>
<li class="slider-indicator fl"></li>
<li class="slider-indicator fl"></li>
</ol>
<!-- 左侧切换按钮 -->
<a href="javascript:;" class="slider-control slider-control-left"><</a>
<!-- 右侧切换按钮 -->
<a href="javascript:;" class="slider-control slider-control-right">></a>
</div>
<!-- 引入jQuery文件 -->
<script src="../jquery.js"></script>
<!-- 引入浏览器是否兼容transition属性的js代码 -->
<script src="js/transition.js"></script>
<!-- 引入显示或隐藏的js代码 -->
<script src="js/showHide.js"></script>
<!-- 引入滑动切换效果的js代码 -->
<script src="滑动切换效果.js"></script>
<!-- 引入切换效果的js代码 -->
<script src="幻灯片淡入淡出和第二种整体滑动切换的效果.js"></script>
<script>
var $focusSlider = $('#focus-slider');
// 定义自定义事件slider-show，当图片准备显示之前会调用该函数，形参index是准备显示图片的索引值，ele是准备显示图片的DOM元素。为后续按需加载图片做准备
$focusSlider.on('slider-show slider-shown slider-hide slider-hidden', function(event, index, ele) {
console.log(index + ':' + event.type);
})
// // 单独控制图片的划动切换效果
// $focusSlider.slider({
// css3: true,
// js: false,
// animation: 'fade', // 滑动效果是slide，淡入淡出是fade
// activeIndex: 0, // 初始化时哪张图片在最上面，从0开始，2就是第三张
// interval: 0 // 自动切换的时间间隔。如果为0表示不开启自动切换，有值就代表自动切换的间隔。毫秒为单位，500毫秒就是0.5秒
// })
// 控制图片整体的容器划动切换效果
$focusSlider.slider({
css3: true,
js: false,
animation: 'fade', // 滑动效果是slide，淡入淡出是fade
activeIndex: 0, // 初始化时哪张图片在最上面，从0开始，2就是第三张
interval: 0, // 自动切换的时间间隔。如果为0表示不开启自动切换，有值就 代表自动切换的间隔。毫秒为单位，500毫秒就是0.5秒
loop: true, // 是否开启首尾相连的功能
})
</script>
</body>
</html>
这是fade切换和第一种单独控制的划动切换效果文件
(function ($) {
'use strict';
function Slider($ele, options) {
this.$ele = $ele;
this.$options = options;
// 获取每一张图片
this.$items = this.$ele.find('.slider-item');
// 获取所有图片的总数量
this.$itemsLen = this.$items.length;
// 获取底部的每一个小圆点
this.$indicator = this.$ele.find('.slider-indicator');
// 将当前显示图片的索引值保存在$currentIndex这个属性上，保存之前先使用_getCorrectIndex函数判断一下边界值，以免传入错误的图片索引值
this.$currentIndex = this._getCorrectIndex(this.$options.activeIndex);
// 获取左右两侧的按钮
this.$controls = this.$ele.find('.slider-control');
// 调用初始化方法
this._init();
}
Slider.DEFAULTS = {
css3: false,
js: false,
animation: 'fade',
activeIndex: 0,
interval: 0,
};
// 初始化的函数，只供内部使用
Slider.prototype._init = function () {
var self = this;
// 及相应图片的底部小圆点的active激活样式。先将所有小圆点的active激活样式移除，再将应该显示active激活样式的小圆点添加上类名
this.$indicator.removeClass('slider-indicator-active').eq(this.$currentIndex).addClass('slider-indicator-active');
// 如果调用时使用的是slide滑入滑出的切换效果，就添加一个to属性，因此to属性就是_slide函数
if (this.$options.animation === 'slide') {
// 给#focus-slider这个父容器添加上类名slider-slide
this.$ele.addClass('slider-slide');
// 调用滑动切换效果的函数，传入调用时的参数，进行初始化
this.$items.move(this.$options);
// 获取图片的宽度
this.itemsWidth = this.$items.eq(0).width();
// 让默认显示图片的left值设为0，让其显示出来。其它所有的图片都使用了absolute绝对定位，都是重叠在一起的，并且是贴着父容器的右侧，在父容器之外等待
this.$items.eq(this.$currentIndex).css('left', 0);
// 如果调用时使用的是slide滑动切换效果，就添加一个to属性，因此to属性就是_slide函数
this.to = this._slide;
// 如果使用的css3运动方式需要添加transition类名，但是js运动方式不需要。如果是js运动方式添加了transition会出错的，所以判断一下显示的图片是否有transition这个类名，如果有的话this.isTransition就是transition，如果没有就为空。
this.isTransition = this.$items.eq(0).hasClass('transition') ? 'transition' : '';
// 这是slide划动切换效果时往外发送消息
this.$items.on('move moved', function (event) {
var index = self.$items.index(this);
// 如果触发的事件是event.move，说明使用的是slide划动切换的效果
if (event.type === 'move') {
// 如果当前显示的图片触发move这个自定义事件，说明当前显示的图片准备隐藏了，因此触发slider-hide这个自定义事件
if (index === self.$currentIndex) {
self.$ele.triggerHandler('slider-hide', index, this);
// 如果是准备显示的图片触发了move自定义事件，表示准备显示的图片准备显示出来了，因此触发自定义事件slider-show
} else {
self.$ele.triggerHandler('slider-show', index, this);
}
// 这里表示触发的自定义事件moved，表示当前显示的图片已经隐藏完了，准备显示的图片已经完全显示出来了
} else {
// 如果是当前显示的图片触发了自定义事件moved，表示已经完全隐藏了，因此触发自定义事件slider-hidden
if (index === self.$currentIndex) { // 这是准备完全显示的图片
self.$ele.triggerHandler('slider-shown', index, this);
// 如果是准备显示的图片触发了自定义事件moved，表示已经完全显示，因此触发自定义事件slider-shown
} else { // 这才是准备完全隐藏的图片
self.$ele.triggerHandler('slider-hidden', index, this);
}
}
})
// 除了slide滑入滑出的效果以外的其它任何效果都用fade淡入淡出的切换效果
} else { // fade，淡入淡出的切换效果
// 给#focus-slider这个父容器添加上类名slider-fade，让其下所有图片都隐藏。
this.$ele.addClass('slider-fade');
// 调用showHide方法，让所有图片都初始化，因为点击显示或隐藏时需要用到showHide函数
this.$items.showHide(this.$options);
// 这是fade切换效果时往外发送的消息。发送准备显示、显示完成、准备隐藏、隐藏完成的消息，以便使用按需加载。当图片每次经过了这四个阶段时，都会调用自定义事件slider- 加上事件状态(show shown hide hidden)，self.$items.index(this)是当前显示图片的索引值，this对应的DOM元素，将这两个当作参数传入该自定义事件
this.$items.on('show shown hide hidden', function (event) {
self.$ele.triggerHandler('slider-' + event.type, self.$items.index(this), this);
})
// 在切换效果为fade时，初始化默认显示的图片
this.$items.eq(this.$currentIndex).show();
// 如果调用时使用的fade淡入淡出的切换效果，就添加一个to属性，因此to属性就是_fade函数
this.to = this._fade;
}
// 给大容器绑定hover事件，鼠标移入，左右两侧按钮显示，移出时隐藏。
this.$ele.hover(function () {
self.$controls.show();
}, function () {
self.$controls.hide();
// 再使用事件代理的方式给左右两侧按钮分别绑定点击事件，被点击时切换图片
}).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)));
});
// 是否启动自动切换图片。如果调用时传入的对象中interval属性不等于0且是有该属性的，并且属性值经过有效性判断后是一个数字，那便启用自动切换图片功能
if (this.$options.interval && !isNaN(Number(this.$options.interval))) {
// 当interval属性是有效的时候，给外面的大容器绑定hover事件，鼠标移入时调用this.pause函数，使用$.proxy()方法改变this指向，清除定时器。 鼠标移出时调用this.auto函数，同样使用$.proxy()方法改变this指向，开启定时器
this.$ele.hover($.proxy(this.pause, this), $.proxy(this.auto, this))
// 调用自动切换图片的函数
this.auto();
}
};
// 该函数用于对图片索引的临界值做判断
Slider.prototype._getCorrectIndex = function (index) {
// 如果使用Number转换，再使用isNaN转换过后仍是true，就表明不是一个数字，直接返回索引值0。
if (isNaN(Number(index))) return 0;
// 如果索引值加1后大于等于图片总数量就说明已经到底了，返回第一张图片的索引值0
if (index >= this.$itemsLen) return index = 0;
// 如果索引值减1后小于0，说明已经到头了，返回最后一张图片的索引值
if (index < 0) return this.$itemsLen - 1;
// 如果前面三个都没有判断到，说明索引值正常，直接返回索引值
return index;
};
// 根据不同的切换效果调用相对应的函数，_fade函数由to属性调用.
Slider.prototype._fade = function (index) {
// 如果重复点击相同的小圆点，还是同一张图片显示和隐藏，后面的代码还是会被执行，这样是浪费性能的。因此如果当前显示的图片和被点击的小圆点是同一个，直接return 退出函数，不执行下面的代码。
if (this.$currentIndex === index) return;
// 当点击切换按钮时让当前显示的图片隐藏，
this.$items.eq(this.$currentIndex).showHide('hide');
// 点击的图片显示出来
this.$items.eq(index).showHide('show');
// 以及当前的小圆点active样式去除
this.$indicator.eq(this.$currentIndex).removeClass('slider-indicator-active');
// 让相对应图片的小圆点添加上active样式
this.$indicator.eq(index).addClass('slider-indicator-active');
// 再让当前被点击的索引值赋值给$currentIndex属性
this.$currentIndex = index;
};
// 根据不同的切换效果调用相对应的函数，_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;
}
}
var self = this;
// 设置准备进入的图片在父容器的左右侧等待，具体在哪一侧等待取决于运动方向，也就是点击的是左侧按钮还是右侧按钮还是底部的小圆点。也就是在父容器之外的左侧还是右侧等待，所以left的距离是整个父容器的宽度，也就是要么是748px，要么是-748px。 初始时，让第一张幻灯片的left值为0，进入视野区，即初始化时除了要显示的图片，其余所有图片都是在父容器的右侧等待，只有实际点击按钮后才会区分到底是在父容器的左侧还是右侧等待。
this.$items.eq(index).removeClass(this.isTransition).css('left', -1 * direction * this.itemsWidth);
setTimeout(function () {
// 开一个定时器，当准备进入的图片已经根据的运动方向确定好已经在等待的位置之后，才开始切换图片。当前幻灯片离开可视区域，根据运动方向决定准备进入的图片是在父容器的左侧还是右侧，也就是direction的值根据点击的是左侧按钮还是右侧按钮决定。如果是左侧按钮就为1，如果是右侧按钮则正好相反，为-1。因为点击右侧按钮时，图片应该是朝左边也就是left值为负值运动。点击左侧按钮时应该是left值朝右边运动，也就是正数值。
self.$items.eq(self.$currentIndex).move('x', direction * self.itemsWidth);
// 准备显示的幻灯片进入可视区域。因为所有图片全部是贴着父容器的右侧，所有要进入时，让left的值为0便可显示在容器中，使其展示出来。
self.$items.eq(index).addClass(self.isTransition).move('x', 0);
// 激活小圆点的active样式
self.$indicator.eq(self.$currentIndex).removeClass('slider-indicator-active');
self.$indicator.eq(index).addClass('slider-indicator-active');
// 切换完成后的图片索引赋值给当前显示图片的索引，同步一样
self.$currentIndex = index;
}, 20)
};
// 自动切换图片的函数
Slider.prototype.auto = function () {
var self = this;
// 设置间歇调用定时器，调用to方法，将当前显示的图片索引值+1，并且经过有效性验证，并当作参数传入。时间间隔是调用时传入的对象中interval属性的值
this.setAutoComplete = setInterval(function () {
self.to(self._getCorrectIndex(self.$currentIndex + 1), -1);
}, this.$options.interval);
};
// 取消自动切换图片的函数
Slider.prototype.pause = function () {
// 清除自动切换图片的定时器。通过构造函数Slider实例化出来的对象上的setAutoComplete属性就是自动切换图片的定时器
clearInterval(this.setAutoComplete);
};
$.fn.extend({
slider: function (obj) {
return this.each(function () {
var $this = $(this),
mode = $this.data('slider'),
newObj = $.extend({}, Slider.DEFAULTS, $this.data(), typeof obj === 'object' && obj)
if (!mode) {
$this.data('slider', mode = new Slider($this, newObj))
}
if (typeof mode[obj] === 'function') {
mode[obj]();
}
})
}
})
})(jQuery)
这是fade切换和第二种整体控制的划动切换效果文件
(function ($) {
'use strict';
function Slider($ele, options) {
this.$ele = $ele;
this.$options = options;
// 获取每一张图片
this.$items = this.$ele.find('.slider-item');
// 获取所有图片的总数量
this.$itemsLen = this.$items.length;
// 获取底部的每一个小圆点
this.$indicator = this.$ele.find('.slider-indicator');
// 将当前显示图片的索引值保存在$currentIndex这个属性上，保存之前先使用_getCorrectIndex函数判断一下边界值，以免传入错误的图片索引值
this.$currentIndex = this._getCorrectIndex(this.$options.activeIndex);
// 获取左右两侧的按钮
this.$controls = this.$ele.find('.slider-control');
// 调用初始化方法
this._init();
}
Slider.DEFAULTS = {
css3: false,
js: false,
animation: 'fade',
activeIndex: 0,
interval: 0,
loop: false,
};
// 初始化的函数，只供内部使用
Slider.prototype._init = function () {
var self = this;
// 及相应图片的底部小圆点的active激活样式。先将所有小圆点的active激活样式移除，再将应该显示active激活样式的小圆点添加上类名
this.$indicator.removeClass('slider-indicator-active').eq(this.$currentIndex).addClass('slider-indicator-active');
// 如果调用时使用的是slide滑入滑出的切换效果，就添加一个to属性，因此to属性就是_slide函数
if (this.$options.animation === 'slide') {
this.$ele.addClass('slider-slide');
// 如果调用时使用的是slide滑动切换效果，就添加一个to属性，因此to属性就是_slide函数
this.to = this._slide;
this.$container = this.$ele.find('.slider-container');
this.$itemsWidth = this.$items.eq(0).width();
this.$container.css('left', -1 * this.$currentIndex * this.$itemsWidth);
this.$container.move(this.$options);
this.hasTransition = this.$container.hasClass('transition') ? 'transition' : '';
// 如果开启了首尾相连的功能，需要有一些特殊的处理
if(this.$options.loop) {
// 首先让大容器再复制一份图片中的第一张，成为最后一张图片
this.$container.append(this.$items.eq(0).clone());
// 这是总图片数量需要加1，因为添加了一张图片
this.$itemsLen++;
}
// 除了slide滑入滑出的效果以外的其它任何效果都用fade淡入淡出的切换效果
} else { // fade，淡入淡出的切换效果
// 给#focus-slider这个父容器添加上类名slider-fade，让其下所有图片都隐藏。
this.$ele.addClass('slider-fade');
// 调用showHide方法，让所有图片都初始化，因为点击显示或隐藏时需要用到showHide函数
this.$items.showHide(this.$options);
// 这是fade切换效果时往外发送的消息。发送准备显示、显示完成、准备隐藏、隐藏完成的消息，以便使用按需加载。当图片每次经过了这四个阶段时，都会调用自定义事件slider- 加上事件状态(show shown hide hidden)，self.$items.index(this)是当前显示图片的索引值，this对应的DOM元素，将这两个当作参数传入该自定义事件
this.$items.on('show shown hide hidden', function (event) {
self.$ele.triggerHandler('slider-' + event.type, self.$items.index(this), this);
})
// 在切换效果为fade时，初始化默认显示的图片
this.$items.eq(this.$currentIndex).show();
// 如果调用时使用的fade淡入淡出的切换效果，就添加一个to属性，因此to属性就是_fade函数
this.to = this._fade;
}
// 给大容器绑定hover事件，鼠标移入，左右两侧按钮显示，移出时隐藏。
this.$ele.hover(function () {
self.$controls.show();
}, function () {
self.$controls.hide();
// 再使用事件代理的方式给左右两侧按钮分别绑定点击事件，被点击时切换图片
}).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)));
});
// 是否启动自动切换图片。如果调用时传入的对象中interval属性不等于0且是有该属性的，并且属性值经过有效性判断后是一个数字，那便启用自动切换图片功能
if (this.$options.interval && !isNaN(Number(this.$options.interval))) {
// 当interval属性是有效的时候，给外面的大容器绑定hover事件，鼠标移入时调用this.pause函数，使用$.proxy()方法改变this指向，清除定时器。 鼠标移出时调用this.auto函数，同样使用$.proxy()方法改变this指向，开启定时器
this.$ele.hover($.proxy(this.pause, this), $.proxy(this.auto, this))
// 调用自动切换图片的函数
this.auto();
}
};
// 该函数用于对图片索引的临界值做判断
Slider.prototype._getCorrectIndex = function (index, maxNum) {
// 如果第二个参数maxNum传了，那maxNum就等于传入的参数，如果没传就使用图片的总张数
maxNum = maxNum || this.$itemsLen;
// 如果使用Number转换，再使用isNaN转换过后仍是true，就表明不是一个数字，直接返回索引值0。
if (isNaN(Number(index))) return 0;
// 如果索引值加1后大于等于图片总数量就说明已经到底了，返回第一张图片的索引值0
if (index > maxNum - 1) return index = 0;
// 如果索引值减1后小于0，说明已经到头了，返回最后一张图片的索引值
if (index < 0) return maxNum - 1;
// 如果前面三个都没有判断到，说明索引值正常，直接返回索引值
return index;
};
// 根据不同的切换效果调用相对应的函数，_fade函数由to属性调用.
Slider.prototype._fade = function (index) {
// 如果重复点击相同的小圆点，还是同一张图片显示和隐藏，后面的代码还是会被执行，这样是浪费性能的。因此如果当前显示的图片和被点击的小圆点是同一个，直接return 退出函数，不执行下面的代码。
if (this.$currentIndex === index) return;
// 当点击切换按钮时让当前显示的图片隐藏，
this.$items.eq(this.$currentIndex).showHide('hide');
// 点击的图片显示出来
this.$items.eq(index).showHide('show');
// 以及当前的小圆点active样式去除
this.$indicator.eq(this.$currentIndex).removeClass('slider-indicator-active');
// 让相对应图片的小圆点添加上active样式
this.$indicator.eq(index).addClass('slider-indicator-active');
// 再让当前被点击的索引值赋值给$currentIndex属性
this.$currentIndex = index;
};
// 根据不同的切换效果调用相对应的函数，_slide由to属性调用.
Slider.prototype._slide = function (index, direction) {
if(this.$currentIndex === index) return;
this.$container.move('x', -1 * index * this.$itemsWidth);
// 这里的index是0-4（一共五张图片），因为显示图片的index和显示小圆点active样式的index值是不同的，所以这里将当前显示图片的index提前更新一下，
this.$currentIndex = index;
// 如果头尾相连的功能开启了，并且点击的是左右两侧的按钮时才会有头尾相连的效果
if(this.$options.loop && direction) {
var self = this;
// 说明点击的是右侧按钮，点击右侧按钮时调用的函数传入了第二个参数，direction就是用来接收实参的形参
if(direction < 0) {
// 点击右侧按钮后，如果index等于0说明显示的是第一张图片了。这时我们需要将大容器的位置立刻移动到第一张图片的位置，但是因为是立刻移动，肉眼无法差距，这时点击右侧按钮时再移动到第二张图片的位置。
if(index === 0) {
// 因此将大容器先去掉transition类名，再立刻将其移动到显示第一张图片的位置，也就是left: 0。
this.$container.removeClass(this.hasTransition).css('left', 0);
// 因为点击右侧按钮时应该让第一张图片隐藏，第二张图片显示，因此将当前显示的图片的索引和index等于1，也就是第二张图片的索引值
this.$currentIndex = index = 1;
// 开个定时器，这时应该让大容器显示出第二张图片，这时的index是1。开定时器的原因是因为要先将大容器立刻移动到显示第一张的图片，这时下一张显示的自然就是第二张图片了。
setTimeout(function() {
self.$container.addClass(self.hasTransition).move('x', index * -1 * self.$itemsWidth)
}, 10);
}
// 到这里说明点击的是左侧按钮
}else {
// 当第一张显示时，点击左侧的按钮想切换到最后一张图片时进行的一些处理
if(index === this.$itemsLen - 1) {
// 让大容器立刻显示出最后一张图片（也就是第一张图片）,
this.$container.removeClass(this.hasTransition).css('left', -1 * index * this.$itemsWidth);
// 再提前将当前显示图片的索引和要显示的图片索引变为倒数第二张图片的索引，因为马上就要显示出倒数第二张图片
this.$currentIndex = index = this.$itemsLen - 2;
// 开个定时器，等准备就绪之后，再将大容器中的倒数第二张图片显示出来。
setTimeout(function() {
self.$container.addClass(self.hasTransition).move('x', index * -1 * self.$itemsWidth);
}, 10)
}
}
// 这里的index重新赋值是为了给相应小圆点添加样式。因为图片有五张（最后一张和第一张是一样的），但是小圆点只有四个
index = this._getCorrectIndex(index, this.$itemsLen - 1);
}
// 以及当前的小圆点active样式去除
this.$indicator.removeClass('slider-indicator-active');
// 让相对应图片的小圆点添加上active样式
this.$indicator.eq(index).addClass('slider-indicator-active');
};
// 自动切换图片的函数
Slider.prototype.auto = function () {
var self = this;
// 设置间歇调用定时器，调用to方法，将当前显示的图片索引值+1，并且经过有效性验证，并当作参数传入。时间间隔是调用时传入的对象中interval属性的值
this.setAutoComplete = setInterval(function () {
self.to(self._getCorrectIndex(self.$currentIndex + 1), -1);
}, this.$options.interval);
};
// 取消自动切换图片的函数
Slider.prototype.pause = function () {
// 清除自动切换图片的定时器。通过构造函数Slider实例化出来的对象上的setAutoComplete属性就是自动切换图片的定时器
clearInterval(this.setAutoComplete);
};
$.fn.extend({
slider: function (obj) {
return this.each(function () {
var $this = $(this),
mode = $this.data('slider'),
newObj = $.extend({}, Slider.DEFAULTS, $this.data(), typeof obj === 'object' && obj)
if (!mode) {
$this.data('slider', mode = new Slider($this, newObj))
}
if (typeof mode[obj] === 'function') {
mode[obj]();
}
})
}
})
})(jQuery)
写回答
1回答
-
好帮手慕夭夭
2021-01-22
同学你好，问题解答如下：
1、老师这边测试同学的代码，当改成滑动切换效果时，会有报错。如下：
这是因为代码调用了move方法，但是没有引入move.js。如下引入：
2、同学再去测试这两个不同js文件时，不要同时引入。测试哪一个，就引入哪一个。
（1）例如第一个，如下：
第一个js的效果，是单独设置每一个图片盒子的位置，达到显示效果。
此时需要使用定位，注意left和width值要为100%：
（2）第二个效果中，是让大盒子整体移动，此时小盒子使用浮动，排列在一行。如下：
按照上面的样式修改之后，每一个单独测试，效果就一样了。
祝学习愉快~
0
相似问题