javascript - Jquery 图像 slider 从右到左完美工作，但从左到右我无法使其居中

Question

我正在制作我的摄影作品集展示/画廊 slider 。

我已经有了一半工作的原型(prototype)，但我终生无法弄清楚为什么它在一个方向上完美地居中图像而不是另一个方向:S

http://jsfiddle.net/K88Yg/3/

有趣的是，如果我调整窗口大小并第二次调用我的 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

我找到了另一个效果更好的解决方案。您只需更改为 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/