Question

我正在寻找一些前端专家提供的有关如何在js carousel画廊周围创建自定义环绕的信息。这个想法很简单我真的有一个图像，文字或其他任何东西的旋转木马，当我到达最后我希望它环绕。我不希望内容简单地淡入和淡出下一段内容。这是一个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。所以总结这一切。我想要一种为画廊创建一个infite循环的方法。我总是编写这些类似的东西来结束，然后用户必须回到另一个方向。如果这听起来令人困惑，请查看codepen。提前谢谢。

Answer 1

你去吧

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

但是对于上帝的爱，请不要使用jQuery动画...至少添加velocity.js，或GSAP插件，你甚至不必改变你的JS你只是添加它并用更高效的函数替换animate函数。

干杯JBSTEW

Answer 2

首先设置移动到默认滑块和边距重置量：

var move = 200;

然后，将容器边距设置为向左滑动move金额：

var margin_reset = (move * -1) + 'px'
$("#inside-container").css('margin-left', margin_reset);

然后，再次使用move变量调整动画边距幻灯片，并在动画完成时执行一个函数，使用prepend / append将最后/第一个项目移动到容器的开头/结尾。

$("#left-button").click(function(){
    $("#inside-container").animate({
      marginLeft: 0
    }, 500, function() {
      $(this).prepend( $(this).find('.items:last') )
        .css('margin-left', margin_reset);
  });
});

$("#right-button").click(function(){
    $("#inside-container").animate({
      marginLeft: (move * -2) +"px"
    }, 500, function() {
      $(this).append( $(this).find('.items:first') )
        .css('margin-left', margin_reset);
  });    
});

为避免初始绘制跳转，您可以将默认css #inside-container更改为：

#inside-container{
    ...
    margin-left: -200px;
}

请参阅：Codepen

JavaScript环绕旋转木马

2 个答案: