老师，这个好像是哪里有问题吧
来源：6-1 按需加载--准备
unbreakable_全栈
2020-08-28 18:51:09
<!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="../css/base.css">
<link rel="stylesheet" href="../css/common.css">
<style>
.slider {
margin-left: 280px;
position: relative;
overflow: hidden;
width: 728px;
height: 504px;
}
.slider-indicator-wrap {
position: absolute;
bottom: 24px;
left: 50%;
margin-left: -36px;
}
.slider-indicator {
width: 8px;
height: 8px;
background-color: #313a43;
border-radius: 50%;
margin-right: 12px;
cursor: pointer;
}
.slider-indicator-active {
position: relative;
top: -2px;
background-color: #f7f8f9;
border: 2px solid #858b92;
}
.slider-control {
display: none;
position: absolute;
top: 50%;
margin-top: -31px;
width: 28px;
height: 62px;
line-height: 62px;
background-color: #000000;
opacity: .8;
filter: alpha(opacity=80);
color: #fff;
font-size: 22px;
font-family: simsun;
text-align: center;
}
.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-item {
position: absolute;
top: 0;
left: 728px;
left: 100%;
width: 100%;
height: 100%;
}
/* .slider-slide .slider-container {
position: absolute;
top: 0;
left: 0;
width: 1000%;
height: 100%;
background-color: red;
}
.slider-slide .slider-item {
float: left;
} */
</style>
</head>
<body>
<div id="focus-slider" class="slider">
<div class="slider-container">
<div class="slider-item">
<a href="###" target="_blank">
<img src="../img/focus-slider/loading.gif" data-src="../img/focus-slider/1.png" alt="" class="slider-img">
</a>
</div>
<div class="slider-item">
<a href="###" target="_blank">
<img src="../img/focus-slider/loading.gif" data-src="../img/focus-slider/2.png" alt="" class="slider-img">
</a>
</div>
<div class="slider-item">
<a href="###" target="_blank">
<img src="../img/focus-slider/loading.gif" data-src="../img/focus-slider/3.png" alt="" class="slider-img">
</a>
</div>
<div class="slider-item">
<a href="###" target="_blank">
<img src="../img/focus-slider/loading.gif" data-src="../img/focus-slider/4.png" alt="" class="slider-img">
</a>
</div>
</div>
<ol class="slider-indicator-wrap">
<li class="slider-indicator text-hidden fl">1</li>
<li class="slider-indicator text-hidden fl">2</li>
<li class="slider-indicator text-hidden fl">3</li>
<li class="slider-indicator text-hidden fl">4</li>
</ol>
<a href="javascript:;" class="slider-control slider-control-left"><</a>
<a href="javascript:;" class="slider-control slider-control-right">></a>
</div>
<script src="../js/jquery.js"></script>
<script src="../js/transition.js"></script>
<script src="../js/showHide.js"></script>
<script src="../js/move.js"></script>
<script src="../js/slider.js"></script>
<script>
var $focusSlider = $('#focus-slider');
$focusSlider.on('slider-show slider-shown slider-hide slider-hidden', function (e, i, elem) {
console.log(i + ':' + e.type)
})
// $focusSlider.on('slider-show', function (e, i, elem) {
// // 按需加载
// })
// $focusSlider.on('slider-move slider-moved', function (e, i, elem) {
// console.log(i + ':' + e.type)
// })
$focusSlider.slider({
css3: true,
js: false,
animation: 'slide', // slide
activeIndex: 0,
interval: 0
});
</script>
</body>
</html>
--------------------------
(function ($) {
"use strict";
function Slider($elem, options) {
this.$elem = $elem;
this.options = options;
this.$items = this.$elem.find(".slider-item");
this.$indicators = this.$elem.find(".slider-indicator");
this.$controls = this.$elem.find(".slider-control");
this.itemNum = this.$items.length;
this.curIndex = this._getCorrectIndex(this.options.activeIndex);
this._init();
}
Slider.DEFAULTS = {
css3: false,
js: false,
animation: "fade", // slide
activeIndex: 0,
interval: 0,
};
Slider.prototype._init = function () {
var self = this;
// init show
this.$indicators.removeClass("slider-indicator-active");
this.$indicators.eq(this.curIndex).addClass("slider-indicator-active");
this.$elem.trigger("slider-show", [this.curIndex, this.$items[this.curIndex]]);
// to
if (this.options.animation === "slide") {
this.$elem.addClass("slider-slide");
this.to = this._slide;
this.$container = this.$elem.find(".slider-container");
this.itemWidth = this.$items.eq(0).width();
this.$container.css("left", -1 * this.curIndex * this.itemWidth);
// move init
this.$container.move(this.options);
if (this.options.loop) {
this.$container.append(this.$items.eq(0).clone());
this.transitionClass = this.$container.hasClass("transition")
? "transition"
: "";
this.itemNum++;
}
} else {
// fade
this.$elem.addClass("slider-fade");
this.$items.eq(this.curIndex).show();
// send message
this.$items.on("show shown hide hidden", function (e) {
self.$elem.trigger("slider-" + e.type, [self.$items.index(this), this]);
});
// showHide init
this.$items.showHide(this.options);
this.to = this._fade;
}
// bind event
this.$elem
.hover(
function () {
self.$controls.show();
},
function () {
self.$controls.hide();
}
)
.on("click", ".slider-control-left", function () {
self.to(self._getCorrectIndex(self.curIndex - 1), 1);
})
.on("click", ".slider-control-right", function () {
self.to(self._getCorrectIndex(self.curIndex + 1), -1);
})
.on("click", ".slider-indicator", function () {
self.to(self._getCorrectIndex(self.$indicators.index(this)));
});
// auto
if (this.options.interval && !isNaN(Number(this.options.interval))) {
this.$elem.hover($.proxy(this.pause, this), $.proxy(this.auto, this));
this.auto();
}
};
Slider.prototype._getCorrectIndex = function (index, maxNum) {
maxNum = maxNum || this.itemNum;
if (isNaN(Number(index))) return 0;
if (index < 0) return maxNum - 1;
if (index > maxNum - 1) return 0;
return index;
};
Slider.prototype._activeIndicators = function (index) {
// this.$indicators.eq(this.curIndex).removeClass("slider-indicator-active");
this.$indicators.removeClass("slider-indicator-active");
this.$indicators.eq(index).addClass("slider-indicator-active");
};
Slider.prototype._fade = function (index) {
if (this.curIndex === index) return;
this.$items.eq(this.curIndex).showHide("hide");
this.$items.eq(index).showHide("show");
this._activeIndicators(index);
this.curIndex = index;
// console.log(this.curIndex);
};
Slider.prototype._slide = function (index, direction) {
if (this.curIndex === index) return;
var self = this;
this.$container.move("x", -1 * index * this.itemWidth);
this.curIndex = index;
if (this.options.loop && direction) {
if (direction < 0) {
// 如果direction小于零，点击的是向右的按钮
if (index === 0) {
this.$container.removeClass(this.transitionClass).css("left", 0);
this.curIndex = index = 1;
setTimeout(function () {
self.$container
.addClass(self.transitionClass)
.move("x", -1 * index * self.itemWidth);
}, 20);
}
} else {
if (index === this.itemNum - 1) {
this.$container
.removeClass(this.transitionClass)
.css("left", -1 * index * this.itemWidth);
this.curIndex = index = this.itemNum - 2;
setTimeout(function () {
self.$container
.addClass(self.transitionClass)
.move("x", -1 * index * self.itemWidth);
}, 20);
}
}
index = this._getCorrectIndex(index, this.itemNum - 1);
}
this._activeIndicators(index);
};
Slider.prototype.auto = function () {
var self = this;
this.intervalId = setInterval(() => {
self.to(self._getCorrectIndex(self.curIndex + 1), -1);
}, this.options.interval);
};
Slider.prototype.pause = function () {
clearInterval(this.intervalId);
};
$.fn.extend({
slider: function (option) {
return this.each(function () {
var $this = $(this),
slider = $this.data("slider"),
options = $.extend(
{},
Slider.DEFAULTS,
$(this).data(),
typeof option === "object" && option
);
if (!slider) {
//解决多次调用dropdown问题
$this.data("slider", (slider = new Slider($this, options)));
}
if (typeof slider[option] === "function") {
slider[option]();
}
});
},
});
})(jQuery);
2回答
-
同学你好，问题解答如下：
同学提供的代码中，slider.js对应的是整体移动的效果，另一个问题中的slider.js中的代码才是对应单独移动的代码，所以这里的js使用的不对，另一个问题的回复见：
https://class.imooc.com/course/qadetail/251018
祝学习愉快！
0 -
unbreakable_全栈
提问者
2020-08-28
这一章节是单独的slider.js，我跟着视频来没跟上，没找到错误在哪里
0h020-08-28
相似问题