不知道为什么用继承就会出现点击按钮切换图片异常，不要就是正常的，麻烦老师帮忙改一下，
问题描述：
不知道为什么用继承就会出现点击按钮切换图片异常，不要就是正常的，麻烦老师帮忙改一下，
相关代码：
class Father {
index = 0;
timer = null;
//构造函数需要传入图片盒子与圆点文字标签的盒子
constructor(img_box = null, span_box = null, slider_layout = null) {
this.img_box = img_box; //主要处理图片
this.span_box = span_box; //主要处理span标签
this.slider_layout = slider_layout; //这个盒子主要用移入移出
this.get_dataArr();
}
//获取图片数组和span的数组，因为每个部分的.slider-item和span都是固定的，所以后构造函数执行后就可以获取到
get_dataArr() {
this.imgs = this.img_box.querySelectorAll('.slider-item');
this.spans = this.span_box.querySelectorAll('span');
}
//如果没有传入参数直接用默认的
move(imgs = this.imgs, spans = this.spans) {
for (let i = 0; i < imgs.length; i++) {
imgs[i].style.opacity = 0;
imgs[i].style.transition = 'all 0.5s'
spans[i].className = ''
spans[i].style.transition = 'all 0.5s'
}
imgs[this.index].style.opacity = 1;
imgs[this.index].style.transition = 'all 0.5s'
spans[this.index].className = 'active'
spans[this.index].style.transition = 'all 0.5s'
}
}
export default Father;相关代码：
import Father from "./Father.js";
class Banner extends Father {
constructor(img_box, span_box, slider_layout) {
super(img_box, span_box, slider_layout);
}
move_rigth(){
this.move();
this.index++;
if (this.index > 2) this.index = 0;
}
//刷新就执行
start() {
//主要获取当前this为Banner后面this都会改变
var s = this;
s.timer = setInterval(() => {
s.move_rigth();
}, 1000);
}
//委托事件
span_onclick() {
//主要获取当前this为Banner后面this都会改变
var s = this;
this.span_box.onclick = (e) => {
if (e.target.tagName.toLowerCase() == 'span') {
let n = e.target.getAttribute('data-n');
s.index = n;
s.move();
}
}
}
//移入事件
imgs_over() {
// 移入暂停
//主要获取当前this为Banner后面this指向都会改变
var s = this;
this.slider_layout.onmouseover = () => {
clearInterval(s.timer);
}
}
//移出事件
imgs_leave() {
var s = this;
//主要获取当前this为Banner后面this都会改变
this.slider_layout.onmouseleave = () => {
s.timer = setInterval(() => {
s.move_rigth();
}, 1000);
}
}
}
// 获取图片的的大盒子
const content_slide = document.getElementById('content_slide');
// 获取小圆点的大盒子
const dots = document.getElementById('dots');
//这个盒子主要用移入移出
const slider_layout = document.getElementById('slider_layout');
let b = new Banner(content_slide, dots, slider_layout);
b.start();
// 圆点委托事件
b.span_onclick();
//移入事件
b.imgs_over();
// 移出继续
b.imgs_leave();
export default Banner;相关代码：
import Banner from "./banner-demo.js";
class Pagination extends Banner {
left_bnt = null;
right_bnt = null;
constructor(img_box, span_box, slider_layout) {
super(img_box, span_box, slider_layout);
}
index=1;
//这两个代码都是一样的不轮播点击就没事点击了就有问题
//index的值为什么不正常，我也弄不明白麻烦老师版本改一下
left_onclik() {
var s = this
this.left_bnt.onclick = function(){
s.index--;
if (s.index < 0) s.index = 2;
s.move();
}
}
//这个代码为什么自动轮播后点击就有问题，其他的调用都是是正常的
right_onclik() {
var s = this
this.right_bnt.onclick = function(){
s.index++;
if (s.index > 2) s.index = 0;
s.move();
}
}
}
const part3_content = document.getElementById('part3_content');
const dots1 = document.getElementById('dots1');
const slider_layout1 = document.getElementById('slider_layout1');
const left_bnt = document.getElementById('left_bnt');
const right_bnt = document.getElementById('right_bnt');
let p = new Pagination(part3_content, dots1, slider_layout1);
p.left_bnt = left_bnt;
p.right_bnt = right_bnt;
// 点击圆点
p.span_onclick();
// 进入暂停
p.imgs_over();
// 移出继续
p.imgs_leave();
p.left_onclik();
p.right_onclik();
//如果不要继承这个代码就是正常的
// const part3_content = document.getElementById('part3_content');
// const dots1 = document.getElementById('dots1');
// const slider_layout1 = document.getElementById('slider_layout1');
// let index = 1;
// let timer = null;
// const left_bnt = document.getElementById('left_bnt');
// const right_bnt = document.getElementById('right_bnt');
// let imgs = part3_content.querySelectorAll('.slider-item');
// let spans = dots1.querySelectorAll('span');
// function m() {
// for (let i = 0; i < imgs.length; i++) {
// imgs[i].style.opacity = 0;
// imgs[i].style.transition = 'all 0.5s'
// spans[i].className = ''
// spans[i].style.transition = 'all 0.5s'
// }
// imgs[index].style.opacity = 1;
// imgs[index].style.transition = 'all 0.5s'
// spans[index].className = 'active'
// spans[index].style.transition = 'all 0.5s'
// console.log(index);
// }
// left_bnt.onclick = () => {
// index--;
// if (index < 0) index = 2;
// m();
// }
// right_bnt.onclick = () => {
// index++;
// if (index > 2) index = 0;
// m();
// }
// slider_layout1.onmouseover = () => {
// clearInterval(timer);
// }
// slider_layout1.onmouseleave = () => {
// timer = setInterval(() => {
// index++;
// if (index > 2) index = 0;
// m();
// }, 1000)
// }
// dots1.onclick=(e)=>{
// if (e.target.tagName.toLowerCase() == 'span') {
// let n = e.target.getAttribute('data-n');
// index = n;
// m();
// }
// }相关代码：
import banner from "./banner-demo.js";
class TabDemo extends banner{
constructor(img_box, span_box,slider_layout){
super(img_box, span_box,slider_layout);
}
}
// 获取图片的的大盒子
const slider_content = document.getElementById('slider_content');
// 得到蓝色小盒子的大盒子
let pagination = document.getElementById('pagination');
const t=new TabDemo(slider_content,pagination);
t.span_onclick();相关代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" href="css/base.css"> <link rel="stylesheet" href="css/index.css"> </head> <body> <div class="wrap"> <!-- 第一种切换方式 --> <div class="banner demo"> <h3>自动或点击小圆点切换图片</h3> <div class="slider-layout" id="slider_layout" > <div class="banner-slider slider"> <div class="slider-content" id="content_slide"> <div class="slider-item slider-item-active"><img src="img/banner01.png" alt=""></div> <div class="slider-item"><img src="img/banner02.png" alt=""></div> <div class="slider-item"><img src="img/banner03.png" alt=""></div> </div> <div class="dots pagination" id="dots"> <span data-n="0" class="active"></span> <span data-n="1"></span> <span data-n="2"></span> </div> </div> </div> </div> <script src="./src/banner-demo.js" type="module"></script> <!-- 第二种切换方式 --> <div class="tab demo"> <h3>选项卡切换</h3> <div class="slider-layout"> <div class="tab-slider slider"> <div class="slider-content" id="slider_content"> <div class="slider-item slider-item-active"><img src="img/banner01.png" alt=""></div> <div class="slider-item"><img src="img/banner02.png" alt=""></div> <div class="slider-item"><img src="img/banner03.png" alt=""></div> </div> <div class="pagination" id="pagination"> <span data-n="0" class="active">最新招标</span> <span data-n="1" >装修日记</span> <span data-n="2" >装修百科</span> </div> </div> </div> </div> <script src="./src/tab-demo.js" type="module"></script> <!-- 第三种切换方式 --> <div class="pagination-arrow demo"> <h3>按钮和小圆点切换</h3> <div class="slider-layout" id="slider_layout1"> <div class="banner-slider slider"> <div class="slider-content" id="part3_content"> <div class="slider-item"><img src="img/banner01.png" alt=""></div> <div class="slider-item slider-item-active"><img src="img/banner02.png" alt=""></div> <div class="slider-item"><img src="img/banner03.png" alt=""></div> </div> <div class="dots pagination" id="dots1"> <span data-n="0" ></span> <span data-n="1"class="active"></span> <span data-n="2"></span> </div> <div class="arrow" id="arrow"> <div id="left_bnt" class="prev"></div> <div id="right_bnt" class="next"></div> </div> </div> </div> </div> <script src="./src/pagination-arrow-demo.js" type="module"></script> </div> </body> </html>
37
收起
正在回答 回答被采纳积分+1
1回答
相似问题
登录后可查看更多问答，登录/注册
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星