代码之家 › 专栏 › 技术社区 › dimButTries

建立一个香草旋转木马-卡在一个逻辑上

javascript

dimButTries · 技术社区 · 5 年前

但是,我似乎无法使用“上一步”或“下一步”按钮来前后移动旋转木马。按钮“起作用”它们的值上下浮动;它们不会改变样式。我可以看到控制台记录值。

我已经尝试过将函数传递回自身——但是,我想不出初始化开始帧的方法;如果这是最好的方法的话。
将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>

0 回复 | 直到 5 年前

Daemon Beast 5 年前

我对HTML和CSS做了一些修改,并重写了大部分JavaScript。

HTML格式

将控件从链接更改为按钮。
移动了传送带内的控件。

JavaScript语言

增加了间距,使代码更具可读性。
添加了一些注释,使代码更易于理解。
修改了carousel构造函数以允许创建多个carousel。
替换了 prev() next() 具有 changeSlide()

'use strict';

window.addEventListener('load', function() {
  const hpCarousel = new carousel('homepage_carousel', 3);
});

function carousel(id, index) {
  // Set slide index and get slides
  this.slideIndex = index;
  const carousel = document.getElementById(id);
  this.slides = [...carousel.getElementsByClassName('slide')];

  // Get controls and add event listeners
  const prev = carousel.getElementsByClassName('prev')[0];
  const next = carousel.getElementsByClassName('next')[0];

  prev.addEventListener('click', () => {
    this.changeSlide(-1);
  });

  next.addEventListener('click', () => {
    this.changeSlide(1);
  });

  // Functions for managing slides
  this.hideAll = function() {
    this.slides.forEach(function(slide) {
      slide.style.display = 'none';
    });
  }

  this.show = function() {
    this.hideAll();
    this.slides[this.slideIndex - 1].style.display = 'flex';
  }

  this.changeSlide = function(amount) {
    this.slideIndex += amount;
    this.slideIndex = (this.slideIndex > this.slides.length) ? 1 :
      (this.slideIndex < 1) ? this.slides.length : this.slideIndex;

    this.show();
  }

  // Show the specified slide
  this.show();
}

.slide {
  width: 100%;
  height: 200px;
}

.slide:nth-child(1) {
  background-color: red;
}

.slide:nth-child(2) {
  background-color: blue;
}

.slide:nth-child(3) {
  background-color: green;
}

<div id='homepage_carousel'>
  <button class='prev'>prev</button>
  <button class='next'>next</button>

  <div>
    <div class='slide'>
      <h1>Frame 1</h1>
    </div>

    <div class='slide'>
      <h1>Frame 2</h1>
    </div>

    <div class='slide'>
      <h1>Frame 3</h1>
    </div>
  </div>
</div>