Question

我正在使用JavaScript进行轮播示例。

之间有什么区别吗？

        index++;
        index == imgList.length && (index = 0);
        show(index);

和

    index++;
    show(index);
    index == imgList.length - 1 && (index = -1);

因为上面的代码可以工作，所以下面的代码不能。以下是所有代码：

window.onload = function() {
  var numList = document.getElementById("numbers").getElementsByTagName("li");
  var imgList = document.getElementById("imgs").getElementsByTagName("li");
  var containBox = document.getElementById("box");
  var index = 0;
  var timer = play = null;

  for (var i = 0; i < numList.length; i++) {
    numList[i].index = i;
    numList[i].onmouseover = function() {
      clearInterval(timer);
      show(this.index);
    };
  }

  function show(a) {
    index = a;
    var opacity = 0;
    for (var i = 0; i < imgList.length; i++) {
      imgList[i].style.opacity = 0;
    }
    for (var i = 0; i < numList.length; i++) numList[i].className = "";
    numList[index].className = "current";
    timer = setInterval(function() {
      opacity += 2;
      imgList[index].style.opacity = opacity / 100;
      opacity == 100 && clearTimeout(timer);
    }, 20);
  }

  function autoPlay() {
    play = setInterval(function() {
      index++;
      show(index);
      index == imgList.length - 1 && (index = -1);
      //                index++;
      //                index == imgList.length && (index = 0);
      //                show(index);
    }, 2000);
  }
  autoPlay();

  containBox.onmouseover = function() {
    clearInterval(play);
  }

  containBox.onmouseout = function() {
    autoPlay();
  }
}

#box {
  width: 445px;
  margin: 0 auto;
  position: relative;
}

ul,
li {
  padding: 0;
  margin: 0;
}

li {
  list-style-type: none;
}

#imgs {
  position: relative;
}

#imgs li {
  position: absolute;
  top: 0;
  left: 0;
}

#imgs img {
  width: 440px;
  height: 220px;
}

#numbers {
  position: absolute;
  right: 15px;
  top: 190px;
}

#numbers li {
  display: inline-block;
  background-color: #F90;
  width: 20px;
  height: 20px;
  border-radius: 20px;
  color: rgb(232, 227, 227);
  text-align: center;
  font-size: 12px;
  line-height: 20px;
}

#numbers .current {
  color: white;
  background-color: #f60;
}

#imgs li {
  opacity: 0;
}

#imgs .current {
  opacity: 1;
}

<div id="box">
  <ul id="imgs">
    <li class="current"><img src="01.jpg" alt="01.jpg">1</li>
    <li><img src="02.jpg" alt="02.jpg">2</li>
    <li><img src="03.jpg" alt="03.jpg">3</li>
    <li><img src="04.jpg" alt="04.jpg">4</li>
    <li><img src="05.jpg" alt="05.jpg">5</li>
  </ul>
  <ul id="numbers">
    <li class="current">1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
  </ul>
</div>

当我在下面编写代码时，我在chrome devtools中进行调试，发现当index首先成为行index = a中的4时，则会出错。我已经工作了三个小时。帮助！

Answer 1

您需要将索引设置回0，以便它可以循环回来

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<select name="study-phase" id="study-phase" class="sp-input">
  <option value=""></option>
  <option id="pri" value="pri">Primary</option>
  <option id="pre" value="pre">Prep</option>
  <option id="sec" value="sec">Secondary</option>
</select>
<select name="study-year" id="study-year" class="sp-input">
  <option value=""></option>
  <option id="a" value="aa">Grade 1</option>
  <option id="b" value="">Grade 2</option>
  <option id="c" value="">Grade 3</option>
  <option id="d" value="">Grade 4</option>
  <option id="e" value="">Grade 5</option>
  <option id="f" value="">Grade 6</option>
  <option id="g" value="">Grade 7</option>
  <option id="h" value="">Grade 8</option>
  <option id="i" value="">Grade 9</option>
  <option id="j" value="">Grade 10</option>
</select>

＆＃13;

function autoPlay() {
    play = setInterval(function() {
        index = index > 4 ? index +1 : 0;
        show(index);
    }, 2000);
}
autoPlay();

＆＃13;

window.onload = function() {
  var numList = document.getElementById("numbers").getElementsByTagName("li");
  var imgList = document.getElementById("imgs").getElementsByTagName("li");
  var containBox = document.getElementById("box");
  var index = 0;
  var timer = play = null;

  for (var i = 0; i < numList.length; i++) {
    numList[i].index = i;
    numList[i].onmouseover = function() {
      clearInterval(timer);
      show(this.index);
    };
  }

  function show(a) {
    index = a;
    var opacity = 0;
    for (var i = 0; i < imgList.length; i++) {
      imgList[i].style.opacity = 0;
    }
    for (var i = 0; i < numList.length; i++) numList[i].className = "";
    numList[index].className = "current";
    timer = setInterval(function() {
      opacity += 2;
      imgList[index].style.opacity = opacity / 100;
      opacity == 100 && clearTimeout(timer);
    }, 20);
  }

  function autoPlay() {

    play = setInterval(function() {
      index = index < 4? index+1 : 0;
      show(index);
    }, 2000);
  }
  autoPlay();

  containBox.onmouseover = function() {
    clearInterval(play);
  }

  containBox.onmouseout = function() {
    autoPlay();
  }
}

＆＃13;

#box {
  width: 445px;
  margin: 0 auto;
  position: relative;
}

ul,
li {
  padding: 0;
  margin: 0;
}

li {
  list-style-type: none;
}

#imgs {
  position: relative;
}

#imgs li {
  position: absolute;
  top: 0;
  left: 0;
}

#imgs img {
  width: 440px;
  height: 220px;
}

#numbers {
  position: absolute;
  right: 15px;
  top: 190px;
}

#numbers li {
  display: inline-block;
  background-color: #F90;
  width: 20px;
  height: 20px;
  border-radius: 20px;
  color: rgb(232, 227, 227);
  text-align: center;
  font-size: 12px;
  line-height: 20px;
}

#numbers .current {
  color: white;
  background-color: #f60;
}

#imgs li {
  opacity: 0;
}

#imgs .current {
  opacity: 1;
}

＆＃13;

SetInterval做转盘。两个相似的片段，一个是对的，另一个是错的。为什么？

1 个答案: