Question

我遇到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");
    });
});

Answer 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");
    });

});

Answer 2

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

此处my adapted Bin。

水平旋转木马越来越差距

2 个答案: