javascript - slider 导航器工作非常缓慢

Question

由于我是 JQuery 的新手，我最近通过创建一个带有导航按钮的简单 slider 来练习它。

整个 slider 工作正常，但导航按钮响应非常缓慢。当我第一次点击它们时，我需要点击它们两次才能让它们响应。控制台上没有错误。除导航按钮响应时间外，一切正常。

提前感谢您的帮助。

var slides = document.getElementsByClassName('slide');
var slider_count = 1;
var offset_value;
start();

function left() {

  slider_count--;
  if (slider_count < 0) {
    slider_count = slides.length - 1;
  }
  offset_value = slides[slider_count].offsetLeft;
  $("#wrapper").animate({
    scrollLeft: offset_value
  }, 1000);

}

function right() {


  if (slider_count >= slides.length) {
    slider_count = 0;
  }
  offset_value = slides[slider_count].offsetLeft;
  $("#wrapper").animate({
    scrollLeft: offset_value
  }, 1000);
  slider_count++;
}

function start() {


  if (slider_count == slides.length) {
    slider_count = 0;
  }

  offset_value = slides[slider_count].offsetLeft;
  slider_count++;
  $("#wrapper").animate({
    scrollLeft: offset_value
  }, 1000);
  setTimeout(start, 3000);
}

html,
body,
body * {
  margin: 0;
  padding: 0;
}

#wrapper {
  height: 300px;
  white-space: nowrap;
  overflow: hidden;
}

.slide {
  display: inline-block;
  width: 100%;
  height: 100%;
}

#slide-option-1 {
  background-color: #808080;
}

#slide-option-2 {
  background-color: green;
}

#slide-option-3 {
  background-color: blue;
}

#main {
  position: relative;
}

.nav {
  position: absolute;
  cursor: pointer;
}

#nav-1 {
  left: 10px;
  top: 45%;
}

#nav-2 {
  right: 10px;
  top: 45%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="main">
  <a id="nav-1" onclick="left()" class="nav">Left</a>
  <div id="wrapper">
    <div id="slide-option-1" class="slide"></div>
    <div id="slide-option-2" class="slide"></div>
    <div id="slide-option-3" class="slide"></div>
  </div>
  <a id="nav-2" class="nav" onclick="right()">Right</a>
</div>

Answer 1

用0初始化slider_count。

var slides = document.getElementsByClassName('slide');
var slider_count = 0;
var offset_value;
start();

function left() {

  slider_count--;
  if (slider_count < 0) {
    slider_count = slides.length - 1;
  }
  offset_value = slides[slider_count].offsetLeft;
  $("#wrapper").animate({
    scrollLeft: offset_value
  }, 1000);

}

function right() {

  slider_count++;
  if (slider_count >= slides.length) {
    slider_count = 0;
  }
  offset_value = slides[slider_count].offsetLeft;
  $("#wrapper").animate({
    scrollLeft: offset_value
  }, 1000);
}

function start() {

  slider_count++;
  if (slider_count >= slides.length) {
    slider_count = 0;
  }

  offset_value = slides[slider_count].offsetLeft;
  $("#wrapper").animate({
    scrollLeft: offset_value
  }, 1000);
  setTimeout(start, 3000);
}

html,
body,
body * {
  margin: 0;
  padding: 0;
}

#wrapper {
  height: 300px;
  white-space: nowrap;
  overflow: hidden;
}

.slide {
  display: inline-block;
  width: 100%;
  height: 100%;
}

#slide-option-1 {
  background-color: #808080;
}

#slide-option-2 {
  background-color: green;
}

#slide-option-3 {
  background-color: blue;
}

#main {
  position: relative;
}

.nav {
  position: absolute;
  cursor: pointer;
}

#nav-1 {
  left: 10px;
  top: 45%;
}

#nav-2 {
  right: 10px;
  top: 45%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="main">
  <a id="nav-1" onclick="left()" class="nav">Left</a>
  <div id="wrapper">
    <div id="slide-option-1" class="slide"></div>
    <div id="slide-option-2" class="slide"></div>
    <div id="slide-option-3" class="slide"></div>
  </div>
  <a id="nav-2" class="nav" onclick="right()">Right</a>
</div>