Question

我用HTML和CSS创建了滑块的外观。现在，我需要使用JavaScript进行滑动。

document.getElementById('next').addEventListener('click', function(event) {
  event.preventDefault();
  // Slide it
})

#slideshow {
  position: relative;
  overflow: hidden;
  margin: 20px auto 0 auto;
  border-radius: 4px;
  width: 500px;
}

#slideshow ul {
  position: relative;
  margin: 0 auto;
  padding: 0;
  height: 300px;
  list-style: none;
  width: 500px;
  overflow: hidden;
}

#slideshow ul li {
  position: relative;
  display: block;
  float: left;
  margin: 0;
  padding: 0;
  width: 500px;
  height: 300px;
  background: skyblue;
  text-align: center;
  line-height: 300px;
}

<div id="slideshow">
  <ul>
    <li>SLIDE 1</li>
    <li style="background: orange;">SLIDE 2</li>
    <li>SLIDE 3</li>
    <li style="background: orange;">SLIDE 4</li>
  </ul>
  <a href="#" id="prev">&lt;</a>
  <a href="#" id="next">&gt;</a>
</div>

我不知道如何滑动它。我已经用document.querySelector('li').style.left = '500px';尝试过了，但是那行不通。

没有插件，没有jQuery，仅适用于原始JS！

任何帮助将不胜感激！

Answer 1

如果检查li元素，则可以看到它们按垂直顺序堆叠，因此它们远低于用户可以看到的范围。它适用于position：absolute，请参见我的示例。

我向所有li元素添加了一个过渡CSS行。然后，只有具有“活动” css类的元素才在正确的位置。所有其他元素都向左移动500px。

# index (lambda)
which(result == max(result)) / (15-1)
# log likelihood
result[which(result == max(result))]

var currentSlide = "slide1"
var nextSlide = "slide2"

document.getElementById('next').addEventListener('click', function(event) {
  event.preventDefault();
  // Slide it
  var ele = document.getElementById(currentSlide);
  removeClass(ele, "active");
  ele = document.getElementById(nextSlide);
  addClass(ele, "active");

  if (currentSlide === "slide1") {
    currentSlide = nextSlide;
    nextSlide = "slide3";
  } else if (currentSlide === "slide2") {
    currentSlide = nextSlide;
    nextSlide = "slide4";
  } else if (currentSlide === "slide3") {
    currentSlide = nextSlide;
    nextSlide = "slide1";
  } else if (currentSlide === "slide4") {
    currentSlide = nextSlide;
    nextSlide = "slide2";
  }

})

/* helpers */

function addClass(el, className) {
  if (el.classList)
    el.classList.add(className)
  else if (!hasClass(el, className)) el.className += " " + className
}

function removeClass(el, className) {
  if (el.classList)
    el.classList.remove(className)
  else if (hasClass(el, className)) {
    var reg = new RegExp('(\\s|^)' + className + '(\\s|$)')
    el.className = el.className.replace(reg, ' ')
  }
}

#slideshow {
  position: relative;
  overflow: hidden;
  margin: 20px auto 0 auto;
  border-radius: 4px;
  width: 500px;
}

#slideshow ul {
  position: relative;
  margin: 0 auto;
  padding: 0;
  height: 300px;
  list-style: none;
  width: 500px;
  overflow: hidden;
}

#slideshow ul li {
  transition: 1s;
  position: absolute;
  float: left;
  display: block;
  margin: 0;
  padding: 0;
  width: 500px;
  height: 300px;
  background: skyblue;
  text-align: center;
  line-height: 300px;
  left: -500px;
}

.active {
  left: 0px!important;
}

滑动li元素

1 个答案: