javascript - 如何递增变量直到达到 6，然后将变量重新定义为 1 并继续？

Question

我正在为我的作品集页面制作内容 slider 。目标是根据您单击的按钮将“var state”加或减 1。

“var state”将显示框递增 1 - 6

• 问题 1:一旦“var state”等于 6，就没有框 7。 如何将“var state”重新定义为 1 以重新启动轮换？

• 问题 2:现在相反。如果 'var state' 等于 1 并且单击向下，则没有框 0。如何将 'var state' 重新定义为 6？

var state = 1;
function currentState() {
    if(state <= 6){
        $("#example"+ state).addClass("selected").show()
        $(".example").not("#example"+ state).hide()
    }
}

.example{
    width: 200px;
    height: 50px;
    margin: 10px;
    background: #333;
    color: #FFF;
    font-size: 2em;
}
.hidden{
    display: none;	
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<button type="button" onClick="state++;currentState();" id="up">Up</button>
<button type="button" onClick="state--;currentState();" id="down">Down</button>

<div id="example1" class="example">1</div>
<div id="example2" class="example hidden">2</div>
<div id="example3" class="example hidden">3</div>
<div id="example4" class="example hidden">4</div>
<div id="example5" class="example hidden">5</div>
<div id="example6" class="example hidden">6</div>

Answer 1

如果 if 语句大于 6 或小于 1，则将其更改为仅 eval:

var state = 1;
function currentState() {
  if (state > 6) {
    state = 1
  } else if (state < 1) {
    state = 6
  }
  $("#example" + state).addClass("selected").show()
  $(".example").not("#example" + state).hide()
}

.example {
  width: 200px;
  height: 50px;
  margin: 10px;
  background: #333;
  color: #FFF;
  font-size: 2em;
}

.hidden {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="button" onClick="state++;currentState();" id="up">Up</button>
<button type="button" onClick="state--;currentState();" id="down">Down</button>

<div id="example1" class="example">1</div>
<div id="example2" class="example hidden">2</div>
<div id="example3" class="example hidden">3</div>
<div id="example4" class="example hidden">4</div>
<div id="example5" class="example hidden">5</div>
<div id="example6" class="example hidden">6</div>