老师帮我修改一下谢谢，这个不太会写
来源：5-2 自由编程
清夏_
2022-10-01 17:25:46
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Class 的应用</title>
<link rel="stylesheet" href="./slider.css" />
</head>
<body>
<div class="slider-layout">
<div class="slider">
<div class="slider-content">
<div class="slider-item">
<a href="javascript:;"
><img src="./images/6.jpg" alt="1" class="slider-img"
/></a>
</div>
<div class="slider-item">
<a href="javascript:;"
><img src="./images/7.jpg" alt="1" class="slider-img"
/></a>
</div>
<div class="slider-item">
<a href="javascript:;"
><img src="./images/8.jpg" alt="1" class="slider-img"
/></a>
</div>
<div class="slider-item">
<a href="javascript:;"
><img src="./images/9.jpg" alt="1" class="slider-img"
/></a>
</div>
<a href="javascript:;" class="leftbtn btn"><</a>
<a href="javascript:;" class="rightbtn btn">></a>
</div>
</div>
</div>
<script src="./base.js"></script>
<script>
const leftbtn = document.querySelector(".leftbtn");
const rightbtn = document.querySelector(".rightbtn");
const slider = document.querySelector(".slider");
// console.log(BaseSlider);
class Slider extends BaseSlider {
constructor(el, options) {
super(el, options);
this._bindEvent();
}
/* 左右按钮事件监听 */
_bindEvent() {
leftbtn.addEventListener("click", () => {
this.prev();
});
rightbtn.addEventListener("click", () => {
this.next();
});
}
}
// 大盒子绑定鼠标移入移出事件
slider.addEventListener("mouseenter", () => {
btn.style.display = "block";
});
new Slider(document.querySelector(".slider"), {
// 图片切换间隔时间2s
speed: 2000,
});
</script>
</body>
</html>/* css reset */
* {
padding: 0;
margin: 0;
}
a {
text-decoration: none;
outline: none;
}
img {
vertical-align: top;
}
/* layout */
.slider-layout {
width: 80%;
height: 420px;
margin: 0 auto;
}
/* slider */
.slider,
.slider-content,
.slider-item,
.slider-img {
width: 100%;
height: 100%;
}
.slider {
overflow: hidden;
/* 相对定位 */
position: relative;
}
.slider-item {
float: left;
}
.slider-animation {
transition-property: transform;
transition-duration: 0ms;
}
/* 左右按钮 */
/* 共性 */
.btn {
position: absolute;
background-color: rgba(255, 255, 255, 0.711);
width: 60px;
height: 60px;
top: 50%;
margin-top: -30px;
border-radius: 50%;
text-align: center;
line-height: 55px;
font-size: 50px;
color: rgba(0, 0, 0, 0.404);
/* 默认隐藏按钮 */
display: none;
}
.leftbtn {
left: 0;
}
.rightbtn {
right: 0;
}// 默认参数
const DEFAULTS = {
// 初始索引
initialIndex: 0,
// 切换时是否有动画
animation: true,
// 切换速度，单位 ms
speed: 300
};
// base
const ELEMENT_NODE = 1;
const SLIDER_ANIMATION_CLASSNAME = 'slider-animation';
class BaseSlider {
constructor(el, options) {
// console.log(options)
if (el.nodeType !== ELEMENT_NODE)
throw new Error('实例化的时候，请传入 DOM 元素！');
// 实际参数
this.options = {
...DEFAULTS,
...options
};
const slider = el;
const sliderContent = slider.querySelector('.slider-content');
const sliderItems = sliderContent.querySelectorAll('.slider-item');
// 添加到 this 上，为了在方法中使用
this.slider = slider;
this.sliderContent = sliderContent;
this.sliderItems = sliderItems;
this.minIndex = 0;
this.maxIndex = sliderItems.length - 1;
this.currIndex = this.getCorrectedIndex(this.options.initialIndex);
// 每个 slider-item 的宽度（每次移动的距离）
this.itemWidth = sliderItems[0].offsetWidth;
this.init();
}
// 获取修正后的索引值
// 随心所欲，不逾矩
getCorrectedIndex(index) {
if (index < this.minIndex) return this.maxIndex;
if (index > this.maxIndex) return this.minIndex;
return index;
}
// 初始化
init() {
// 为每个 slider-item 设置宽度
this.setItemsWidth();
// 为 slider-content 设置宽度
this.setContentWidth();
// 切换到初始索引 initialIndex
this.move(this.getDistance());
// 开启动画
if (this.options.animation) {
this.openAnimation();
}
}
// 为每个 slider-item 设置宽度
setItemsWidth() {
for (const item of this.sliderItems) {
item.style.width = `${this.itemWidth}px`;
}
}
// 为 slider-content 设置宽度
setContentWidth() {
this.sliderContent.style.width = `${this.itemWidth * this.sliderItems.length
}px`;
}
// 不带动画的移动
move(distance) {
this.sliderContent.style.transform = `translate3d(${distance}px, 0px, 0px)`;
}
// 带动画的移动
moveWithAnimation(distance) {
this.setAnimationSpeed(this.options.speed);
this.move(distance);
}
// 设置切换动画速度
setAnimationSpeed(speed) {
this.sliderContent.style.transitionDuration = `${speed}ms`;
}
// 获取要移动的距离
getDistance(index = this.currIndex) {
return -this.itemWidth * index;
}
// 开启动画
openAnimation() {
this.sliderContent.classList.add(SLIDER_ANIMATION_CLASSNAME);
}
// 关闭动画
closeAnimation() {
this.setAnimationSpeed(0);
}
// 切换到 index 索引对应的幻灯片
to(index) {
index = this.getCorrectedIndex(index);
if (this.currIndex === index) return;
this.currIndex = index;
const distance = this.getDistance();
if (this.options.animation) {
return this.moveWithAnimation(distance);
} else {
return this.move(distance);
}
}
// 切换上一张
prev() {
this.to(this.currIndex - 1);
}
// 切换下一张
next() {
this.to(this.currIndex + 1);
}
// 获取当前索引
getCurrIndex() {
return this.currIndex;
}
}问题描述：第一 我不知道那个this到底该什么时候去使用，感觉是super没学好，那里很绕，很多种应用场景跟this指向 ，第二我这个右按钮不知道为啥没有显示 第三我这个按左按钮不知道为啥直接四张图片一起换 第四我不知道我这些事件应该放在哪个位置 请老师费心帮我看看
写回答
1回答
-
好帮手慕久久
2022-10-05
同学你好，解答如下：
1、左右按钮不显示，有如下原因：
a、按钮的dom元素并没有获取，修改如下：
b、html结构不合理，.slider-content的transform属性会影响右箭头的位置。调整如下：
2、this的使用和super没什么关系。super的东西了解就行，知道有super这个东西，不用记住。this可以回顾如下课程，在笔记中记好每种场合下this指向什么就行了，用到的时候翻笔记：
在Class中，this一般指向实例，按照这一点使用就行。如果出现this相关报错，就使用console.log打印一下this，看看this指向谁，然后想办法改就行了。
3、轮播图效果有很多形式，我们这里并不是无缝滚动的形式，所以点击左按钮，可以看到第一张切换到第四张的过程。这里是最基本的轮播图，效果是正常的，不用纠结，也不需要更改。
4、代码的写法不是固定的，事件写在哪里也不是固定的，同学这种写法就可以。建议把鼠标移入，箭头隐藏效果添加上：
另外，建议按照练习要求，让初始显示第二张：
同学可以看看问答区其他人的写法，将每一种自己没见过的写法都琢磨几遍，自己思路就丰富了。
祝学习愉快！
0
相似问题