Question

我希望我的页面一次显示3个div，当我点击下一个时，我希望它显示接下来的3个div。然后当我点击上一个时，我想显示之前的3个。

$("#container .result").slice(0, 3).show();

   $("#right").click(function () {

       var items = $('#container .result:visible').hide().last();

       var nextItems = items.nextAll().slice(0, 3);

       if (nextItems.length === 0) {
           nextItems = $("#container .result").slice(0, 3);
       }

       nextItems.show();
   });
   $("#left").click(function () {

       var items = $('#container .result:visible').hide().last();

       var nextItems = items.prevAll().slice(0, 3);

       if (nextItems.length === 0) {
           nextItems = $("#container .result").slice(0, 3);
       }

       nextItems.show();
   });

问题在于，当我点击上一个，它来到最后3个div，当我再次点击它显示2比1.我怎么能解决这个问题？我希望它在前3个时停止。

Answer 1

你走在正确的轨道上，我对你的代码的聪明才智印象深刻。

通过非常简单的修复解决了您的主要问题;在#left点击处理程序中，将.last()替换为.first()：

var items = $('#container .result:visible').hide().first();

当您在前3个点击上一个时循环到最后3个，将此行更改为下一行：

nextItems = $("#container .result").slice(0, 3);

nextItems = $("#container .result").slice($("#container .result").length-3, $("#container .result").length);

但是我认为现在或将来可能会出现.result的数量不是3的数量，让我们说{{1}例如。或7 我创建了一个脚本来处理它，并在两个方向上循环：

在HTML中，我为这两个按钮提供了一个类$("#container .result").first().show(); //initialize divs at pageload $(".nav").click(function() { var start=0, step=3; var currentItems = $("#container .result:visible").hide(); var currentLast = (this.id==="prev" ? currentItems.first() : currentItems.last()); var nextItems = (this.id==="prev" ? currentLast.prevAll() : currentLast.nextAll()); if (nextItems.length === 0) { //if the last set of divs has been reached, loop around var itemsLength = $("#container .result").length; if (this.id==="prev") {start=itemsLength-step; step=itemsLength;} //determine wich way to loop around nextItems = $("#container .result").slice(start,step); //loop around } else if (nextItems.length < step) { //if the next divs aren't a full set, keep some divs from the current set visible if (this.id==="prev") {step-=nextItems.length;} else {start=nextItems.length;} //determine which current items should remain visible currentItems.slice(start,step).each(function(){nextItems.push(this);}); //add selected current items to nextItems-array } else {nextItems=nextItems.slice(start,step);} //if the next divs are a full set, simply select the next set nextItems.show(); //show the next set }).click(); //initialize divs at pageload （请参阅下面的代码段），以便我可以将他们的点击处理程序合并为一个。
我将第一行改为："nav"。该行 - 与链接到点击处理程序的$("#container .result").first().show();结合使用，会替换您的行：.click()（位于脚本顶部）。
这使您可以更灵活地一次更改要在页面上显示的$("#container .result").slice(0, 3).show();的数量。在点击处理程序的开头，我声明div，这是唯一一个数字是硬编码的地方，所以如果你想要更改数量，你只需要改变那个数字（并且可能调整一些样式））。
其余的解释在代码中的注释中。

请参阅下面的 代码段 以获取演示：

＆＃13;

var step=3;

＆＃13;

$("#container .result").first().show(); //initialize divs at pageload
$(".nav").click(function() {
  var start=0, step=3;
  var currentItems = $("#container .result:visible").hide();
  var currentLast = (this.id==="prev" ? currentItems.first() : currentItems.last());
  var nextItems = (this.id==="prev" ? currentLast.prevAll() : currentLast.nextAll());
  
  if (nextItems.length === 0) { //if the last set of divs has been reached, loop around
    var itemsLength = $("#container .result").length;
    if (this.id==="prev") {start=itemsLength-step; step=itemsLength;} //determine wich way to loop around
    nextItems = $("#container .result").slice(start,step); //loop around
  } else if (nextItems.length < step) { //if the next divs aren't a full set, keep some divs from the current set visible
    if (this.id==="prev") {step-=nextItems.length;} else {start=nextItems.length;} //determine which current items should remain visible
    currentItems.slice(start,step).each(function(){nextItems.push(this);}); //add selected current items to nextItems-array
  } else {nextItems=nextItems.slice(start,step);} //if the next divs are a full set, simply select the next set
  nextItems.show(); //show the next set
}).click(); //initialize divs at pageload

＆＃13;

html,body {width:98%; height:90%;}

#container {width:100%; height:90%; background:lightgrey;}
#container .result {display:none; float:left; width:30%; height:100%; margin:0 1.66%; background:lightgreen;}
#container .result > div {display:table; width:100%; height:100%;}
#container .result > div > div {display:table-cell; width:100%; height:100%; text-align:center; vertical-align:middle; font:bolder 2em sans-serif;}

.nav {margin-top:2%; cursor:pointer;}

＆＃13;

＆＃13; codepen：https://codepen.io/anon/pen/YQoJzd?editors=1010
jsfiddle：https://jsfiddle.net/k8ysj6gq/1/

您可以忽略CSS和HTML（按钮上的<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="container"> <div class="result"><div><div>1</div></div></div> <div class="result"><div><div>2</div></div></div> <div class="result"><div><div>3</div></div></div> <div class="result"><div><div>4</div></div></div> <div class="result"><div><div>5</div></div></div> <div class="result"><div><div>6</div></div></div> <div class="result"><div><div>7</div></div></div> </div> <button type="button" class="nav" id="prev">PREVIOUS</button> <button type="button" class="nav" id="next">NEXT</button>除外），这些都是我们可以看到的。所有相关代码都在JS中。

Answer 2

基本上你可以做类似下面的事情。在Next或Previous上单击设置容器margin-left以定位或循环遍历所有div。

＆＃13;

$(document).ready(function() {
  $('.next-button').on('click', function() {
    if (parseInt($('.carousel-item').css("margin-left").slice(0, -2)) < -2000) {
      $('.carousel-item').animate({
        "margin-left": "0px"
      }, 200)
    } else {
      $('.carousel-item').animate({
        "margin-left": "-=600px"
      }, 200);
    }
  });


  $('.prev-button').on('click', function() {
    if (parseInt($('.carousel-item').css("margin-left").slice(0, -2)) > 0) {
      $('.carousel-item').animate({
        "margin-left": "-2000px"
      }, 200)
    } else {
      $('.carousel-item').animate({
        "margin-left": "+=600px"
      }, 200);
    }
  });
});

＆＃13;

.carousel-container {
  height: 500px;
  display: flex;
  margin: 40px 20px;
  position: relative;
  overflow: hidden;
  width: 720px;
  padding: 0;
  border: 1px solid red;
  align-items: center;
}

.carousel-item {
  height: 100%;
  margin: 5px;
  margin-left: 60px;
  padding: 0;
  -moz-box-orient: horizontal;
  -ms-box-orient: horizontal;
  -webkit-box-orient: horizontal;
  -o-box-orient: horizontal;
  box-orient: horizontal;
  display: -moz-box;
  display: -ms-box;
  display: -webkit-box;
  display: -o-box;
  display: box;
  list-style-type: none;
}

.item {
  border: solid 1px #333;
  margin-right: 10px;
  width: 200px;
  display: flex;
  align-items: center;
}

.item>a {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: flex-end;
}

.prev-button,
.next-button {
  border: 1px solid green;
  background-color: gray;
}

.navigation {
  width: 60px;
  margin: 0;
  position: absolute;
  top: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

.next-button:hover,
.prev-button:hover {
  background-color: red;
}

.navigation:active {
  color: white;
}

.next-button {
  right: 0;
}

.prev-button {
  left: 0;
}


/* .carousel-item li:nth-child(1) {
  background-image: url('http://urbanphenomena.net/imgs/cover/bq2.jpg');
  background-size: cover;
} */

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="carousel-container">
  <a class="prev-button navigation" href="#">
    <</a>
      &nbsp;
      <div class="carousel-item">
        <li class="item"><a href="#"> 1 </a></li>
        <li class="item"><a href="#"> 2 </a></li>
        <li class="item"><a href="#"> 3 </a></li>
        <li class="item"><a href="#"> 4 </a></li>
        <li class="item"><a href="#"> 5 </a></li>

        <li class="item"><a href="#"> 6 </a></li>
        <li class="item"><a href="#"> 7 </a></li>
        <li class="item"><a href="#"> 8 </a></li>
        <li class="item"><a href="#"> 9 </a></li>
        <li class="item">
          <a href="#"> </a>
        </li>
      </div>
      &nbsp;
      <a class="next-button navigation" href="#">></a>
</div>
Run co

＆＃13;

Answer 3

好的，所以你的第一个错误就是当你试图回写3时，你从前3个中获得了前3个而不是最后3个。所以我把.last（）改为.first（）。然后在上一个= 0时循环回来，你所做的就是从当前的3切片，而不是在整个元素数组的末尾切片。

这是指向具有工作代码的codepen的链接（您显然必须更改变量以适合您的项目）：https://codepen.io/anon/pen/qjzxee?editors=1010

将var items = $('#container .result:visible').hide().last();更改为var items = $('#container .result:visible').hide().first();

和

if (nextItems.length === 0) {
       nextItems = $("#container .result").slice(0, 3);
   }

到

if (nextItems.length === 0) {
       var allItems =  $("#container .result");
       nextItems = $("li").slice(allItems.length - 3,allItems.length);
   }

这也适用于数字元素是您每次跳过的数字的倍数，但我可以解决这个问题，如果您喜欢

如何循环通过DIV

3 个答案: