Question

我正在处理我的摄影作品集显示/图库滑块。

我已经有一半工作原型，但我终生无法弄清楚为什么它将图像完美地集中在一个方向而不是另一个方向：S

有趣的是，如果我调整窗口大小并第二次调用我的move_slide（）函数它会转到正确的位置......那么发生了什么？谁能摆脱光明？

我认为这是一个非常古怪的问题。那双新鲜的眼睛可以帮助我分配。

到目前为止我的代码：

jQuery(window).load(function() {


    //
    function set_slide_width(add_extra) {
        if (!add_extra) {add_extra = 0;}
        var slide_width = 0;
        $("#barely_slide article img").each(function(){
            slide_width += $(this).outerWidth();
        });
        $("#barely_slide article").css("width",slide_width + add_extra);
    }
    //
    set_slide_width();


    //
    function move_slide() {
        var focus_margin = 0;
        var img_real_height = 0;
        //
            var add_extra = 0;
            //var prev_deduct = 0;
        //
        $("#barely_slide article img").each(function(){
            //
                //if ($(this).attr("class") == "previous") {
                //  var theImage = new Image();
                //  theImage.src = $(this).attr("src");
                //  var img_real_width = theImage.width;
                //  var img_real_width_padding = img_real_width + ($(this).outerWidth() - $(this).width());
                //  prev_deduct = img_real_width_padding - $(this).outerWidth();
                //}
            //
            if ($(this).attr("class") == "focus") {
                    var theImage = new Image();
                    theImage.src = $(this).attr("src");
                    var img_real_width = theImage.width;
                    var img_real_width_padding = img_real_width + ($(this).outerWidth() - $(this).width());
                    img_real_height = theImage.height;
                    //
                        add_extra = img_real_width_padding - $(this).outerWidth();
                    //
                focus_margin += img_real_width_padding / 2;
                return false;
            }
            focus_margin += $(this).outerWidth();
        });
        //
            set_slide_width(add_extra);
        //
        var container_center = $("#barely_slide").outerWidth() / 2;
        var offset = container_center - focus_margin;
        //console.dir(offset);
        $("#barely_slide article").animate({"margin-left": offset }, "fast");
            //
            var img_height_offset = (img_real_height / 2) - 150;
            $(".focus").animate({"height":img_real_height,"margin-top":-img_height_offset}, "fast");
    }
    //
    move_slide();


    //
    var resize_timeout;
    $(window).resize(function() {
        clearTimeout(resize_timeout);
        resize_timeout = setTimeout(function(){    
            move_slide();
        },100);
    });


    //
    $("#barely_slide article img").on("click", function(){
        if ($(this).attr("class") == "focus") {return false;}

        //
            $("#barely_slide article img").removeClass("previous");
            $("#barely_slide article .focus").addClass("previous");
            $(".previous").animate({"height":300,"margin-top":0}, "fast");
        //

        $("#barely_slide article .focus").removeClass("focus");
        $(this).addClass("focus");
        move_slide();
        return false;
    });

});

Answer 1

我探索了你的代码并发现你在第一张图像之前做了一些数学运算（类focus的图像调整了大小。这会影响你的数学。我看到点击已经专注的图像，右边包含移动，但不是左边。这是解决方案的关键。

您正在移动图像并使其居中。但是，然后，您调整最后一张专注的图片，即将内容移到左侧。

我最快的解决方案是在第一个img调整大小后调用calcul。见这里：http://jsfiddle.net/K88Yg/4/

这可能不是你想要的效果，我只想告诉你这是什么问题。

我的修复只是在动画complete之后调用“移动”功能。

$("#barely_slide article img").on("click", function(){
    var $this = $(this);
    $(".focus").animate({"height":300,"margin-top":0}, {
        duration : "fast",
        complete: function(){
            $("#barely_slide article img").removeAttr("class");
            $this.addClass("focus");
            move_slide();
        }
    });
    return false;
});

请注意，在complete函数之前，您需要将this值保存到变量中。

编辑：我做了2或3次黑客攻击，以达到你想要的效果。这里是小提琴：http://jsfiddle.net/K88Yg/5/

这里列出了我改变的内容：

功能点击：

$("#barely_slide article img").removeClass("previous");
$("#barely_slide article .focus").addClass("previous");
var oldStyle = $(".previous").attr('style');
$(".previous").css({"height":'300px',"margin-top":0}  )  
$("#barely_slide article .focus").removeClass("focus");
$(this).addClass("focus");
move_slide();
$(".previous").attr('style', oldStyle)  
$(".previous").animate({"height":'300px',"margin-top":0}, "fast");

我正在保存当前的CSS，然后在计算之前更改它们。在计算之后，我正在设置旧的CSS并执行动画。

通过这样做，我有一点小故障，有时最后一个图像包裹。发现那是函数add_extra。所以我保存了旧的额外费用并做了一点条件：

if(old_extra > add_extra)set_slide_width(add_extra);

var container_center = $("#barely_slide").outerWidth() / 2;
var offset = container_center - focus_margin;
$("#barely_slide article").animate({"margin-left": offset }, {duration : "fast", complete : function(){
    if(old_extra < add_extra)set_slide_width(add_extra);
}});

如果旧的额外值更高，则会更改动画前的宽度。如果它较低，则等待动画完成。没有更多的包裹故障。

EDIT2：检查Chango answer。他做了数学计算，允许你做与上面代码完全相同的事情，但代码更少。

Answer 2

好的，解决方案非常简单，问题出在这个方法中：

$("#barely_slide article img").on("click", function(){
    if ($(this).attr("class") == "focus") {return false;}

    //
        $("#barely_slide article img").removeClass("previous");
        $("#barely_slide article .focus").addClass("previous");
        $(".previous").animate({"height":300,"margin-top":0}, "fast");
    //

    $("#barely_slide article .focus").removeClass("focus");
    $(this).addClass("focus");
    move_slide();
    return false;
});

问题是你在$（“。previous”）完成动画之前移动你的幻灯片。结果是如果“.previous”在“.focus”的左边，那么focus_margin就会被计算错误。

以下是解决方案：

$("#barely_slide article img").on("click", function(){
    if ($(this).attr("class") == "focus") {return false;}

    $("#barely_slide article img").removeClass("previous");
    $("#barely_slide article .focus").addClass("previous");

    var $image = $(this);
    $(".previous").animate({"height":300,"margin-top":0}, "fast",
        function () {
          $("#barely_slide article .focus").removeClass("focus");
          $image.addClass("focus");
          move_slide();
        });


    return false;
});

以下是jsfiddle以及其他一些修改：http://jsfiddle.net/JQaLB/2/

修改：

$(this).hasClass("focus")

优于

$(this).attr("class") == "focus"

和

add_extra = add_extra || 0;

优于

if (!add_extra) {add_extra = 0;}

我稍后会修改以添加更多详细信息。

Answer 3

我找到了另一个更好的解决方案。您只需要更改为move_slide功能：

function move_slide() {
  var focus_margin = 0;
  var img_real_height = 0;
  var add_extra = 0;
  $("#barely_slide article img").each(function(){
    if ($(this).hasClass("focus")) {
      var theImage = new Image();
      theImage.src = $(this).attr("src");
      var img_real_width = theImage.width;
      var img_real_width_padding = img_real_width + ($(this).outerWidth() - $(this).width());
      img_real_height = theImage.height;

      add_extra = img_real_width_padding - $(this).outerWidth();

      focus_margin += img_real_width_padding / 2;
      return false;
    /***************** This is where the changes begin *************************/
    } else if ($(this).hasClass("previous")) {
      // If has the previous class, calculate the width with a height of 300.
      var shrinked_width = 300 *  $(this).width() / $(this).height();
      // add the padding.
      var img_width_width_padding = shrinked_width + ($(this).outerWidth() - $(this).width());
      // then update the focus_margin
      focus_margin += img_width_width_padding;
    } else {
      focus_margin += $(this).outerWidth();
    }
    /***************** This is where the changes end ***************************/
  });
  set_slide_width(add_extra);

  var container_center = $("#barely_slide").outerWidth() / 2;
  var offset = container_center - focus_margin;

  $("#barely_slide article").animate({"margin-left": offset }, "fast");

  var img_height_offset = (img_real_height / 2) - 150;
  $(".focus").animate({"height":img_real_height,"margin-top":-img_height_offset}, "fast");
}

这是jsfiddle：http://jsfiddle.net/JQaLB/4/

Jquery图像滑块从右到左完美地工作，但是从左到右我无法使它居中

3 个答案: