开发者问题收集

构建一个原始旋转木马 - 卡在一个逻辑上

2020-07-18
95
javascript

任何指导或指引都将非常受欢迎。

我正在尝试制作一个原始的 JS 轮播，我离实现构建一个轮播的目标已经非常接近了。

但是，我似乎无法让上一个或下一个按钮来向前或向后移动轮播。这些按钮“起作用”，它们的值会上下移动；它们不会改变样式。我可以看到控制台记录了这些值。

  • 我尝试将函数传递回自身 - 但是，我想不出一种初始化起始帧的方法；如果这是最好的方法。
  • 将 slideIndex 值添加到样式规则中不起作用。我得到的结果是，如果您继续按“prev”；最终，另一个框架会随机弹出到下面。

任何帮助都非常受欢迎。

附注 - 有没有更好的方法来处理变量作用域；无需做任何事？ 

'use strict';
function carousel(n) {
  this.slideIndex = n;
  this.slides = document.querySelectorAll('.homepage_carousel_wrapper .homepage_carousel');
  [...this.slides].forEach(function(x) {
    x.style.display = 'none';
  });
  this.slides[this.slideIndex-1].style.display = "flex";  
  this.prev = function(n) {
    this.slideIndex += n;
    if (this.slideIndex < 1) {
      this.slideIndex = this.slides.length;
    }
    console.log(`${this.slideIndex}`);
    this.slides[this.slideIndex].style.display = "flex";  
  }
  this.next = function(n) {
    this.slideIndex += n;
    if (this.slideIndex > this.slides.length) {
      this.slideIndex = 1;
    }
    console.log(`${this.slideIndex}`);
    this.slides[this.slideIndex].style.display = "flex";  
    //carousel(this.slideIndex)
  }
};
window.addEventListener('load', function() {
  const hp_carousel = new carousel(3);
  let carouselPrev = document.getElementById('carousel_prev');
  carouselPrev.addEventListener('click', function(e){
    hp_carousel.prev(-1);
    e.preventDefault();
    e.stopPropagation();
  }, false);
  let carouselNext = document.getElementById('carousel_next');
  carouselNext.addEventListener('click', function(e){
    hp_carousel.next(1);
    e.preventDefault();
    e.stopPropagation();
  }, false);
});
.homepage_carousel:nth-child(1) {
  background-color: red;
  width: 100%;
  height: 200px;
}
.homepage_carousel:nth-child(2) {
  background-color: blue;
  width: 100%;
  height: 200px;
}
.homepage_carousel:nth-child(3) {
  background-color: green;
  width: 100%;
  height: 200px;
}
<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>carousel</title>
</head>

<body>
  <a id='carousel_prev'>prev</a>
  <a id='carousel_next'>next</a>
  <div class='homepage_carousel_wrapper'>
    <div class='homepage_carousel'>
      <h1>Frame 1</h1>
    </div>
    <div class='homepage_carousel'>
      <h1>Frame 2</h1>
    </div>
    <div class='homepage_carousel'>
      <h1>Frame 3</h1>
    </div>
 </div>

</body>

</html>
1个回答

我已经对HTML和CSS进行了一些修改，并重写了大多数JavaScript。

  • 将控件从链接更改为按钮。
  • 将控件移动到旋转木马内。

CSS

  • 删除了重复的CSS。

javascript

  • 添加了间距以使代码更可读。
  • 添加了一些评论，以使代码易于理解。
  • 修改了轮播构造器以允许制作多个旋转木马。
  • 将控制事件的侦听器移到了轮播构造器中。
  • 用 consect> consextlide（） 函数替换 prev（） 和 next（） 函数。
727919564

Daemon Beast
2020-07-18