使用 JavaScript 制作旋转木马

Question

我正在尝试滑动 DIVs。

我成功让第一个 DIV 进入第二个 DIV ，反之亦然。但是，我无法将第 2 DIV 滑到第 3 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

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

Answer 2

原版旋转木马JavaScript

使用 CSS display: flex 对齐元素，使用 transition 和 transform 设置动画。
JS用于increment/decrementCurrent Slide索引并设置父级的CSS transform:

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，在每次 prev/next 单击时分别递增/递减。乘以幻灯片宽度，您将得到 scrollLeft 位置，或者，如果您使用 CSS，则得到 transform: translateX 百分比。

Answer 3

实际上，在这个特定的上下文中，您可以只是增加（或减少） 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/

当然，class 用于 next/prev 个按钮。

使用 JavaScript 制作旋转木马

Make a carousel using JavaScript

html

javascript

css

jquery

slide

原版旋转木马JavaScript

示例 jQuery 和您的代码