使用 JavaScript 制作轮播

Question

我正在尝试制作滑动 DIV。

我成功地将 1st DIV 转到 2nd DIV，反之亦然。 但是，我无法将 2nd DIV 滑到 3rd DIV。

代码如下：

$(function(){

  var slideW = $('#slides').width();
  
  // Next slide
  $('#next-slide').click(function( e ){
    e.preventDefault(); 
    $('#slides').animate({scrollLeft: slideW}, 600);
  });
  
  //previous slide
    $('#back-slide').click(function( e ){
    e.preventDefault();
    $('#slides').animate({scrollLeft: -slideW }, 600);
  });
  
});

#slides{  
  position:relative;
  overflow:hidden;
  margin:0 auto;
  background:#cf5;
  width:100%;
  height:200px;
  white-space:nowrap;
}
#slides div{
  position:relative;
  display:inline-block;
  margin-right:-4px;
  white-space:normal;
  vertical-align:top;
  *display:inline;
  background:#eee;
  width:100%;
  height:200px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="slides">
  <div>
    Content 1
    <a href="#" id="next-slide">Show Content 2 .. it works!</a>
  </div>
  
  <div>
  Content 2
    <a href="#" id="back-slide">Show Content 1 .. it works!</a>
    <br>
    <a href="#" id="next-slide">Show Content 3 .. not working!!</a>
  </div>
  
  <div>
  Content 3
    <a href="#" id="back-slide">Show Content 2 .. not working!!</a>
  </div>

</div>

Answer 1

原生 JavaScript 中的轮播

使用 CSS display: flex 对齐元素并使用 transition 和 transform 进行动画处理。
JS 用于递增/递减 Current Slide 索引并设置父级的 CSS 变换：

const ELS = (sel, EL) => (EL || document).querySelectorAll(sel);
const EL = (sel, EL) => (EL || document).querySelector(sel);

const carousel = (EL_carousel) => {

  const EL_mover  = EL('.carousel-mover', EL_carousel);
  const ELS_slide = ELS('.carousel-slide', EL_carousel);
  const ELS_prev  = ELS('.prev', EL_carousel);
  const ELS_next  = ELS('.next', EL_carousel);
  const tot = ELS_slide.length;
  let c = 0; // Current slide index

  const anim = () => {
    EL_mover.style.transform = `translateX(-${c * 100}%)`;
  };

  const prev = () => {
    c -= 1;
    if (c < 0) c = tot - 1;
    anim();
  };

  const next = () => {
    c += 1;
    if (c > tot - 1) c = 0;
    anim();
  };

  ELS_prev.forEach(el => el.addEventListener("click", prev));
  ELS_next.forEach(el => el.addEventListener("click", next));

};

// Init carousel
ELS(".carousel").forEach(carousel);

.carousel {
  position: relative;
  overflow: hidden;
}

.carousel-mover {
  display: flex;
  background: #eee;
  transition: transform 0.5s;
}

.carousel-slide {
  flex: 1 0 100%;
  min-height: 100px;
  background: #eee;
}

<div class="carousel">
  <div class="carousel-mover">
    <div class="carousel-slide">
      Page 1 Home
      <button type="button" class="next">NEXT</button>
    </div>
    <div class="carousel-slide">
      Page 2
      <button type="button" class="prev">PREV</button>
      <button type="button" class="next">NEXT</button>
    </div>
    <div class="carousel-slide">
      Page 3 End
      <button type="button" class="prev">PREV</button>
      <button type="button" class="next">GO HOME</button>
    </div>
  </div>
</div>

---

jQuery 和您的代码示例

另一个使用 jQuery 的不太好的例子，你有点死板的命名（因为使用了 ID）和标记：

$(function(){
  
  var $slide = $("#slides");      // Cache the elements you plan to reuse!
  var $pages = $slide.children(); // Get the actual slides pages
  var slideW = $slide.width();
  var c = 0;                      // Use a counter
  
  // Use classes instead of ID!
  $('.prev, .next').click(function( e ){
    c = $(this).is(".next") ? ++c : --c;             // incr/decr. counter
    $slide.animate({scrollLeft: slideW * c }, 600);  // Anim by multiplying
  });
  
});

#slides{  
  position:relative;
  overflow:hidden;
  margin:0 auto;
  background:#cf5;
  width:100%;
  height:200px;
  white-space:nowrap;
}
#slides div{
  position:relative;
  display:inline-block;
  margin-right:-4px;
  white-space:normal;
  vertical-align:top;
  *display:inline;
  background:#eee;
  width:100%;
  height:200px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="slides">
  <div>
    Content 1
    <a href="#" class="next">Show Content 2</a>
  </div>
  
  <div>
  Content 2
    <a href="#" class="prev">Show Content 1</a>
    <br>
    <a href="#" class="next">Show Content 3</a>
  </div>
  
  <div>
  Content 3
    <a href="#" class="prev">Show Content 2</a>
  </div>
</div>

回顾一下：
而不是始终将动画设置为固定的 +- 宽度slideW，上面使用了变量c，该变量分别在每次上一个/下一次单击时递增/递减。乘以幻灯片宽度，您将获得 scrollLeft 位置，或者，如果您使用 CSS，则为 transform: translateX 百分比。

Answer 2

实际上，在这种特殊情况下，您可以只增加（或减少）scrollLeft 的值（我会说更简单的解决方案）：

var slideW = $('#slides').width();


  // Next slide
  $('.next-slide').click(function( e ){
    e.preventDefault(); 

    $('#slides').animate({scrollLeft:"+="+slideW}, 600);
  });

  //previous slide
    $('.back-slide').click(function( e ){
    e.preventDefault();
    $('#slides').animate({scrollLeft: "-="+slideW }, 600);
  });

问题是您的 scrollLeft 值始终是静态的，因此它是动态的。

演示：https://jsfiddle.net/x7p65b1v/1/

当然，使用类作为下一个/上一个按钮。

Answer 3

您不能在 HTML 页面中放置相同的 Id...