CSS过渡以在点击时将点分页移动到左/右

Question

我试图实现某种转换（或转换）CSS分页的行为。

我有5个点，我想在用户点击相应按钮（左或右）时触发动画。

• 当用户点击左侧时，点应该动画向左移动。
• 当用户单击右键时，点应该动画向右移动。

中间的点应该始终居中，并且应该总是有5个点可见，并且位置不应该改变整个分页。

因此，如果单击“向右”按钮：第四个点应向左滑动以显示它变为活动点，反之亦然，单击左键。

我试图表明，当用户点击向左或向右时，分页已经移动，这就是我在努力的地方。请参阅以下代码：

$('.left').click(function(e) {
  e.preventDefault();
  // some animation should happen here to show the pagination has been updated
});

$('.right').click(function(e) {
  e.preventDefault();
  // some animation should happen here to show the pagination has been updated
});

.left,
.right {
  display: inline-block;
  background: #000;
  color: #fff;
  width: 100px;
  text-align: center;
  margin-bottom: 20px;
}

.pagination {
  display: block;
  margin-bottom: 30px;
}

.dot {
  display: inline-block;
  height: 10px;
  width: 10px;
  background: #ccc;
  margin: 4px;
  vertical-align: middle;
  border-radius: 10px;
}

.dot:nth-child(even) {
  width: 8px;
  height: 8px;
}

.dot:nth-child(odd) {
  width: 6px;
  height: 6px;
}

.dot.active {
  background: #333;
  width: 10px;
  height: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="pagination">
  <div class="dot"></div>
  <div class="dot"></div>
  <div class="dot active"></div>
  <div class="dot"></div>
  <div class="dot"></div>
</div>

<a href="#" class="left">
left
</a>

<a href="#" class="right">
right
</a>

Answer 1

根据你给我的例子，运行这个片段，我认为这就是你想要的。

说明：

现在分页有2个div：一个out div，把它看成一个窗口，总是在同一个位置，宽度足以看到5个点。 （overflow:none非常重要，因为窗口只显示5个点并隐藏任何不适合它的东西）。还有一个带有所有点的内部div，我们将左右移动。

var currentPage = 2;
processDotPosition();

$('.left' ).click(function() { currentPage -= 1; });
$('.right').click(function() { currentPage += 1; });

$('.left, .right').click(function(e) {
  e.preventDefault();
  processDotPosition();
});


function processDotPosition(){
  //settings
  var firstNavigableDot = 2;
  var lastNavigableDot = $('.dot').length-3;

  //don't allow going out of range
  if (currentPage<firstNavigableDot) currentPage=lastNavigableDot;
  if (currentPage>lastNavigableDot)  currentPage=firstNavigableDot;
  
  //manage "active" class
  $('.dot').removeClass('active').removeClass('nearActive');
  $('.dot').eq(currentPage).addClass('active');
  $('.dot').eq(currentPage+1).addClass('nearActive');
  $('.dot').eq(currentPage-1).addClass('nearActive');
  
  //slide the inner div (the +35 is for centering the active dot)
  var newPosition = -(currentPage-2)*19;
  $('.paginationInner').finish().animate({left: newPosition});

}

.left,
.right {
  display: inline-block;
  background: #000;
  color: #fff;
  width: 100px;
  text-align: center;
  margin-bottom: 20px;
}

.paginationOutter {
  display: block;
  margin-bottom: 30px;
  margin-left:50px;
  width: 100px; /* only show 5 dots */
  overflow: hidden;
  height:18px;
  position: relative;
  
}

.paginationInner{
  position:absolute;
}

.dot {
  display: inline-block;
  background: #ccc;
  margin: 4px;
  vertical-align: middle;
  border-radius: 10px;
  transition: height width 1s ease;
}


/* 1st and 5th */
.dot {
  width: 6px;
  height: 6px;
}

/* 2nd and 4th */
.dot.nearActive {
  width: 8px;
  height: 8px;
}


/* 3rd */
.dot.active {
  background: #333;
  width: 10px;
  height: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="paginationOutter">
  <div class="paginationInner">
    <div class="dot"></div>
    <div class="dot"></div>
    <div class="dot"></div>
    <div class="dot"></div>
    <div class="dot"></div>
    <div class="dot"></div>
    <div class="dot"></div>
    <div class="dot"></div>
    <div class="dot"></div>
    <div class="dot"></div>
    <div class="dot"></div>
    <div class="dot"></div>
    <div class="dot"></div>    
  </div>
</div>

<a href="#" class="left">
left
</a>

<a href="#" class="right">
right
</a>

Answer 2

试试以下

$('.left').click(function(e) {
  e.preventDefault();  
     if($("div.active").prev().length>0)
  {
  $("div.active").removeClass('active').prev().addClass('active');
  }  

 
});

$('.right').click(function(e) {
  e.preventDefault();
 

      if($("div.active").next().length>0)
  {
  $("div.active").removeClass('active').next().addClass('active');
  } 
});

.left,
.right {
  display: inline-block;
  background: #000;
  color: #fff;
  width: 100px;
  text-align: center;
  margin-bottom: 20px;
}

.pagination {
  display: block;
  margin-bottom: 30px;
}

.dot {
  display: inline-block;
  height: 10px;
  width: 10px;
  background: #ccc;
  margin: 4px;
  vertical-align: middle;
  border-radius: 10px;
}

.dot:nth-child(even) {
  width: 8px;
  height: 8px;
}

.dot:nth-child(odd) {
  width: 6px;
  height: 6px;
}

.dot.active {
  background: #333;
  width: 10px;
  height: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="pagination">
  <div class="dot"></div>
  <div class="dot"></div>
  <div class="dot active"></div>
  <div class="dot"></div>
  <div class="dot"></div>
</div>

<a href="#" class="left">
left
</a>

<a href="#" class="right">
right
</a>

Answer 3

试试这个

var length = 3;
$('.left').click(function(e) {
  e.preventDefault();
  length--;
  //console.log(length);
  $('.active').removeClass('active');
  $(".pagination .dot:nth-child("+length+")").addClass('active');    
  if(length<=1)
    length = 6;  
});

$('.right').click(function(e) {
  e.preventDefault();
  length++;
  //console.log(length);
  $('.active').removeClass('active');
  $(".pagination .dot:nth-child("+length+")").addClass('active');    
  
  
  if(length>=5)
    length = 0;
});

.left,
.right {
  display: inline-block;
  background: #000;
  color: #fff;
  width: 100px;
  text-align: center;
  margin-bottom: 20px;
}

.pagination {
  display: block;
  margin-bottom: 30px;
}

.dot {
  display: inline-block;
  height: 10px;
  width: 10px;
  background: #ccc;
  margin: 4px;
  vertical-align: middle;
  border-radius: 10px;
}

.dot:nth-child(even) {
  width: 8px;
  height: 8px;
}

.dot:nth-child(odd) {
  width: 6px;
  height: 6px;
}

.dot.active {
  background: #333;
  width: 10px;
  height: 10px;
  transition:0.3s all;
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<div class="pagination">
  <div class="dot"></div>
  <div class="dot"></div>
  <div class="dot active"></div>
  <div class="dot"></div>
  <div class="dot"></div>
</div>

<a href="#" class="left">
left
</a>

<a href="#" class="right">
right
</a>
</body>
</html>