JavaScript 环绕轮播

Question

我正在从一些前端专家那里寻找一些关于如何创建自定义环绕 js 轮播画廊的信息。这个想法很简单，我有一个图像、文本或其他内容的轮播，当我到达终点时，我希望它环绕。我不希望内容简单地淡入和淡出到下一段内容。这是当前 div 的画廊，但假设它是图像或您拥有的任何内容。

HTML

<div id="outside-container">
  <div id="inside-container" class="cf">
     <div class="items" id="item1"></div>
     <div class="items" id="item2"></div>
     <div class="items" id="item3"></div>
     <div class="items" id="item4"></div>
  </div>
</div>

<div id="directions">
  <h4 id="left-button">Left</h4>
  <h4 id="right-button">Right</h4>
</div>

CSS

#outside-container{
  display: block;
  width: 400px;
  height: 125px;
  overflow: hidden;
  border: 1px solid #000;
  margin: 0px auto;
}
#inside-container{
  display: block;
  width: 800px;
  overflow: hidden;
  height: 100%;
}

.items{
  float: left;
  margin: 0px;
  width: 200px;
  height: 100%;
}
#item1{ background: green; }
#item2{ background: red; }
#item3{ background: blue; }
#item4{ background: yellow; }

#directions{
  display: block;
  width: 400px;
  margin: 0px auto;
  text-align: center;
}

#left-button, #right-button{
  display: inline-block;
  cursor: pointer;
  margin: 10px;
}

JS

var move = 0;
$("#left-button").click(function(){
    move += 200;
    $("#inside-container").animate({
      marginLeft: move+"px"
    }, 500);
});

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

    move -= 200;
    $("#inside-container").animate({
      marginLeft: move+"px"
    }, 500);
});

这是 codepen .所以总结这一切。我正在寻求一种为画廊创建无限循环的方法。我总是将这些事情编程为结束，然后用户必须以另一种方式返回。如果这听起来令人困惑，请查看代码笔。提前致谢。

Answer 1

给你

http://codepen.io/nickavi/pen/cpFCE

但看在上帝的份上，请不要使用 jQuery animate...至少添加 velocity.js 或 GS​​AP 插件，您甚至不必更改您的 JS，只需添加它即可它用更高效的函数替换了 animate 函数。

干杯 JBSTEW