请老师帮忙查看

当前目录下的index.js文件

import'./css';

import Slider from './module';

// 实例化基类

const slider = new Slider(document.querySelector('.slider'),{

initiallndex:2,

// 切换时是否有动画

animation:true,

// 切换速度，单位ms

speed:300,

// 自动切换，单位ms

autoplay:1000

});

index.html文件

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

<h3>自动或点击小圆点切换图片</h3>

</div>

</div>

<h3>选项卡切换</h3>

</div>

</div>

<h3>按钮和小圆点切换</h3>

</div>

</div>

</div>

</body>

</html>

css文件夹

（1）index.css文件

/* 第二种样式 */

.tab .slider-layout {

height: 360px;

}

.tab-slider {

padding-top: 60px;

}

.tab-slider .pagination {

position: absolute;

top:0;

width: 100%;

}

.tab-slider .pagination span{

float:left;

width: 33.33%;

line-height: 60px;

text-align:center;

border-radius:8px;

-webkit-border-radius:8px;

-moz-border-radius:8px;

-ms-border-radius:8px;

-o-border-radius:8px;

}

.tab-slider .slider-item{

top: 60px;

}

.tab-slider .pagination span.active {

color: #fff;

background: #0058AA;

}

/* 第三种方式 */

.pagination-arrow .arrow div{

opacity: 0;

}

（2）base.css文件

* {

margin: 0;

padding: 0;

font-family: "微软雅黑";

box-sizing: border-box;

}

/* layout */

.wrap {

width:1200px;

margin: 0 auto;

}

.demo {

margin-bottom: 20px;

}

.demo {

background: #f2f2f2;

}

.slider-layout {

width: 1200px;

height: 300px;

margin: 0 auto;

cursor: pointer;

}

/* slider */

.slider,

.slider-content,

.slider-item,

.slider-img {

width: 100%;

height: 100%;

cursor: pointer;

}

.slider {

overflow: hidden;

position: relative;

border-radius:8px;

border: 1px solid gray;

-webkit-border-radius:8px;

-moz-border-radius:8px;

-ms-border-radius:8px;

-o-border-radius:8px;

}

.slider-item {

position: absolute;

top: 0;

left: 0;

opacity: 0;

transition: all 0.3s;

-webkit-transition: all 0.3s;

-moz-transition: all 0.3s;

-ms-transition: all 0.3s;

-o-transition: all 0.3s;

}

.slider-item img{

width: 100%;

height: 300px;

}

.slider-item-active {

opacity: 1;

transition: all 0.3s;

-webkit-transition: all 0.3s;

-moz-transition: all 0.3s;

-ms-transition: all 0.3s;

-o-transition: all 0.3s;

}

/* 小圆点 */

.dots {

position: absolute;

left: 50%;

transform: translate(-50%);

bottom: 20px;

}

.dots span {

display: inline-block;

width: 10px;

height: 10px;

margin: 0 5px;

border-radius: 50%;

background: #333;

}

.dots span.active {

background: #0058AA;

transform: scale(1.5);

-webkit-transform: scale(1.5);

-moz-transform: scale(1.5);

-ms-transform: scale(1.5);

-o-transform: scale(1.5);

}

/* arrow */

.arrow div {

position: absolute;

top: 50%;

transform: translateY(-50%);

width: 60px;

height: 60px;

border-radius: 50%;

background: rgba(0, 0, 0, 0.3) no-repeat center center;

background-size: 48px 48px;

}

.arrow .prev {

left: 0;

background-image: url('../img/prev.png');

}

.arrow .next {

right: 0;

background-image: url('../img/next.png');

}

h3 {

font-size: 32px;

color: #696868;

font-weight: normal;

text-align: center;

padding: 20px 0;

}

/* 控制动画 */

.slider-animation{

transition-property:transform;

transition-duration: 0ms;

}

module文件夹

（1）base.js文件：

// 引入常量

import { ELEMENT_NODE_TYPE,SLIDER_ANIMATION_CLASS_NAME} from './constants';

import DEFAULTS from './defaults';

class BaseSlider{

// 构造函数

constructor(el,options){

// 判断节点类型

if(el.nodeType !== ELEMENT_NODE_TYPE){

throw new Error('实例化的时候，请不要输入DOM元素!');

}

// 实际参数

this.options ={

// 默认参数

...DEFAULTS,

// 用户参数

...options

};

// 获取节点

const sliderEl = el;

const sliderContentEl = sliderEl.querySelector('.slider-content');

const sliderItemEls = sliderContentEl.querySelectorAll('.slider-item');

// 添加到this上，方便在方法中使用

this.sliderEl = sliderEl;

this.sliderContentEl = sliderContentEl;

this.sliderItemEls = sliderItemEls;

// 最小索引值

this.minIndex = 0;

// 最大索引值

this.maxIndex = sliderItemEls.length - 1;

// 当前索引

this.cueeIndex = this.getCorrectedIndex(this.options.initiallndex);

// 每个slider-item的宽度（每次移动的距离）

this.itemWidth = sliderItemEls[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设置宽度：所有slider-item的宽度之和

this.setContentWidth();

// 切换到初始索引initiallndex

this.move(this.getDistance());

// 开启动画

if(this.options.animation){

// 执行开启动画方法

this.openAnimation();

}

// 自动切换

if(this.options.autoplay){

// 执行自动切换方法

this.autoplay();

}

// 为每个slider-item设置宽度

setItemsWidth(){

for (const item of this.sliderContentEls){

item.style.width = `${this.itemWidth}px`;

}

// 为每个slider-content设置宽度

setContentWidth(){

this.sliderContentEL.style.width = `${this.itemWidth * this.sliderContentEls.length}px`;

}

// 不带动画的移动move方法

move(distance) {

this.sliderContentEl.style.transform = `translate3d(${distance}px, 0px, 0px)`;

}

// 获取要移动的距离

getDistance(index = this.currIndex) {

return -this.itemWidth * index;

}

// 开启动画方法

openAnimation(){

this.sliderContentEl.classList.add(SLIDER_ANIMATION_CLASS_NAME);

}

// 设置切换动画速度的方法

setAnimationSpeed(speed = this.options.speed){

this.sliderContentEl.style.transitionDuration = `${speed}ms`;

}

// 关闭动画的方法

closeAnimation(){

this.setAnimationSpeed(0);

}

// 带动画的移动方法

moveWithAnimation(distance){

// 默认参数

this.setAnimationSpeed;

// 调用带动画的移动方法

this.meve(distance)

// 用完动画，速度还原为0

this.sliderContentEL.addEventListener(

'transitionend',

()=>{

this.closeAnimation();

false

);

}

// 自动切换方法

autoplay(){

if(this.options.autoplay <= 0) return;

// 先执行自动切换

this.pause();

// 定时器

this.autoplayTimer = setInterval(()=>{

this.next();

},autoplay);

}

// 暂停自动切换方法

pause(){

// 清除定时器

clearInterval(this.autoplayTimer);

}

// 切换到上一张方法

prev(){

this.options(this.currIndex -1);

}

// 切换到下一张方法

next(){

this.options(this.currIndex +1);

}

// 切换到index索引对应的幻灯片方法

to(index){

// 校正传进来的参数

index = this.getCorrectedIndex(index);

// 判断当前索引是否等于传进来的索引

if(this.currIndex === index) return;

// 如果不等，则让其相等

this.currIndex = index;

// 获取移动距离

const distance = this.getDistance();

// 再判断是否有动画，有则调用动画移动方法

if(this.options.animation){

this.moveWithAnimation(distance);

}else{

this.move(distance);

}

export default BaseSlider;

（2）constants.js文件：

// base

export const ELEMENT_NODE_TYPE =1;

// 与base.css文件对应

export const SLIDER_ANIMATION_CLASS_NAME = 'slider-animation';

（3）defaults.js文件：

// 默认参数

const DEFAULTS = {

// 初始索引

initiallndex:0,

// 切换时是否有动画

animation:true,

// 切换速度，单位ms

speed:300,

// 自动切换，单位ms

autoplay:0

};

export default DEFAULTS;

（4）first.js文件

import BaseSlider from './base.js';

// 继承基类

class firstSlider extends BaseSlider{

constructor(el,options){

// 调用构造方法

super(el,options);

// 获取小圆点

this.dots = this.sliderEl.querySelector('#dots');

// 获取图片

this.sliderItemEls = this.sliderEl.querySelector('#slider-item');

this.addBindEvent();

this.addBindEventmouse();

}

// 圆点绑定事件

addBindEvent(){

this.dots.addEventListener(

'click',

()=>{

// 小圆点变成活跃形式

this.dots.className = 'active';

// 图片跟着改变

this.sliderItemEls.className = 'slider-item-active';

}

)

}

// 图片区域绑定鼠标事件

addBindEventmouse(){

this.sliderEl.addEventListener(

'moserenter',

()=>{

// 鼠标移入，执行暂停自动切换方法

slider.pause();

false

);

this.sliderEl.addEventListener(

'moseleave',

()=>{

// 鼠标移出，执行自动切换方法

slider.autoplay();

false

);

}

export default firstSlider;

（5）index.js文件

import './base';

// 子类继承父类

class Slider extends BaseSlider {

constructor(el,options){

super(el,options);

}

叫我丽红 2022-03-30

源自：Babel 与 Webpack 6-2 项目作业

收起

1回答

好帮手慕慕子 2022-03-30 17:04:11

同学你好，这是个项目作业，建议同学直接提交作业，批作业的老师会针对同学的完整代码，给出详细的批复建议，并整理成文档发送给同学，方便同学查看与修改。祝学习愉快~

收起回答

提问者叫我丽红 #1

但是现在就出问题了，也不知道是哪里的原因，都写不下去了

2022-03-30 21:14:16
好帮手慕慕子回复提问者叫我丽红 #2

同学你好，看同学最新提问已经提交了作业，老师很快就会批复了，请耐心等待哦，祝学习愉快~

2022-03-31 11:38:50

相似问题

老师帮忙看一下

老师帮忙看看

老师，本节课中，您的点评和我的作业不一样，请再帮忙看看

请老师帮忙查看错误

登录后可查看更多问答，登录/注册

前端工程师2020

参与学习人
提交作业 7872 份
解答问题 15282 个

前端技术快速更迭，人才紧缺。带你从0基础开始，成为Web全栈工程师，转行就业更顺畅。

了解课程

本课精华内容

问答作业

老师，我在xhr.send()出错了

92 2

老师好，这里虽然老师给了方法，但我想问问关于定位后的宽高

44 2

函数里面的参数是函数,那么里面作为参数的函数是如何调用的?

74 4

老师请检查

30 1

老师，关于ctx.set()我存在困惑

32 1

查看更多本课问答

请稍等 ...

请老师帮忙查看

请老师帮忙查看

正在回答回答被采纳积分+1

请选择置顶位置