水平旋转木马正在出现差距答案

【问题标题】：Horizontal carousel is getting a gap水平旋转木马正在出现差距
【发布时间】：2014-10-02 05:03:17
【问题描述】：

我遇到了this great stack，您可以在其中构建垂直轮播。我实现了自己的代码版本，以使所有内容都水平滑动。

它工作得很好，但为了让它工作，你必须知道水平画廊将有多少张图片，这样我们才能适应它的代码。否则图像会低于另一个。我有谁知道如何使代码适应画廊的实际宽度？

window.clients = function($elem) {
    var left = parseInt($elem.css("left"));
    var $cp = $("#clients .client");
    var temp = -1 * $cp.width();
    var guarda = [];

    $cp.each(function () {
        quantos.push($(this).width());
    });

    var quantos = guarda.length();

    if(left < temp) {
        left = $("#clients").width();
        $elem.css("left", left);
    }
    $elem.animate({ left: (parseInt(left)-230) }, 1000, "linear", function () {
        window.clients($(this));
    });
};

$(function () {
    $(document).ready(function() {
        var i = 0;
        $("#clients .client").each(function () {
          $(this).css("left", i);
          i += 230;
          window.clients($(this));
      });
    });

    $(".client").hover( function () {
        $(this).children("h3").stop().fadeIn("fast");
    }, function () {
        $(this).children("h3").stop().fadeOut("fast");
    });
});

【问题讨论】：

标签： jquery

【解决方案1】：

我将一些代码更改为（请检查：-http://jsfiddle.net/rNXs9/1203/）。示例代码将为您提供每个内部 div 的宽度，变量将提醒所有 div 的总宽度。

在css中

#verticalScroller > div{
    /*position:absolute;*/
    width:50px;
    height:50px;
    border: 1px solid blue;
    overflow:hidden;
    float: left;
}

在js中

 window.clients = function($elem) {
    var left = parseInt($elem.css("left"));
    var $cp = $("#clients .client");
    var temp = -1 * $cp.width();
    var guarda = [];

    $cp.each(function () {
        quantos.push($(this).width());
    });

    var quantos = guarda.length();

    if(left < temp) {
        left = $("#clients").width();
        $elem.css("left", left);
    }
    $elem.animate({ left: (parseInt(left)-230) }, 1000, "linear", function () {
        window.clients($(this));
    });
};

$(function () {
    $(document).ready(function() {
        var i = 0;
        $("#clients .client").each(function () {
          $(this).css("left", i);
          i += 230;
          window.clients($(this));
      });

     ///this is I was changed for your understanding
        var totalinnerdivwidth = 0;
        $( "#verticalScroller" ).find( "div" ).each(function () {
            alert($(this).width());
             totalinnerdivwidth += $(this).width();
             });
        alert(totalinnerdivwidth);
    });
    ///// 

    $(".client").hover( function () {
        $(this).children("h3").stop().fadeIn("fast");
    }, function () {
        $(this).children("h3").stop().fadeOut("fast");
    });

});

【讨论】：

非常感谢，阿杰！我设法让它几乎工作。我遇到的唯一问题是，在第一次迭代之后，第一个和最后一个盒子之间有一个间隙（盒子的大小）。这是小提琴：jsfiddle.net/GuiHarrison/o8m219v5
另外，这段代码是否占用大量内存？我的印象是观看每一个盒子的要求太高了。有没有办法让它变得平滑？

【解决方案2】：

我找到了完美的解决方案！不过，这绝对不是我的优点，我找到了this other stack（这完全值得更多的赞扬，令人难以置信的是答案如何得到这么少的分数）。优雅的解决方案 os 滚动，而不是移动元素。这种思维方式的转变使整个代码变得如此枯燥和无记忆！

这里是my adapted Bin。

【讨论】：