Javascript jQuery旋转木马导航在调整大小时中断

我在SO的代码帮助下制作了一个post carousel，它基本上可以正常工作，但我在调整窗口大小方面遇到了问题

一切都在这里

如果在某个窗口宽度上重新加载它，它可以正常工作，但如果只是调整窗口大小，导航将停止正常工作

现在，当你在第一个帖子时，你不能转到上一个（旋转木马不会移动），当你在最后一个帖子时，旋转木马也不会向前移动。但是如果你调整大小，他们会。实现此功能的jquery代码如下

jQuery(document).ready(function ($) {
    'use strict';

    $(window).on('load', function () {
        $('.post_excerpt_carousel').each(function(){
            var $this = $(this);
            post_excerpt_positioning($this);
        });
    });

    $(window).on('resize', function(){
        $('.post_excerpt_carousel').each(function(){
            var $this = $(this);
            if ($(window).width()>760) {
                $(this).find('li').css('width', '570px');
            }
            post_excerpt_positioning($this);
        });
    });

    function post_excerpt_positioning(e){

        var $carousel = e;
        var outer_width = $(window).outerWidth();
        var container_width;

        if (outer_width > 1190) {
            container_width = 1170;
        }

        if (outer_width > 960 && outer_width < 1190) {
            container_width = 960;
        }

        if (outer_width < 960) {
            container_width = parseInt((9/10)*outer_width,10);
        }

        var $prev = $carousel.find('.carousel_prev');
        var $next = $carousel.find('.carousel_next');
        var duration = $carousel.data('duration');
        var li_number = $carousel.find('li').length;
        var $ul = $carousel.find('ul');
        var $li = $ul.find('li');

        if (outer_width < 760){
            $li.css('width', container_width);
            $li.eq(1).addClass('active');
            if ($li.eq(2).hasClass('active')) {
                $li.eq(2).removeClass('active');
            }
        } else if (outer_width > 760){
            $li.eq(1).addClass('active');
            $li.eq(2).addClass('active');
        }

        var list_width = $carousel.find('li').outerWidth(true);
        var left_offset;
        if ($('.boxed_body_wrapper').length) {
            left_offset = list_width-60;
        } else{
            left_offset = parseInt(list_width - (outer_width - container_width-42)/2, 10);
        }

        $ul.css({'display': 'inline-block', 'width': li_number * $carousel.find('li').outerWidth(true) + 'px', 'left': -left_offset + 'px'});


        var not_active_no = $carousel.find('li').not('.first').not('.last').not('.active').length;
        var not_active_width = not_active_no * $carousel.find('li').outerWidth(true);

        $carousel.on('click', '.carousel_next', function (e) {
            e.preventDefault();
            var $li = $ul.find('li');
            var $a = $('.active', $carousel);

            if (!$a.next().hasClass('last') && !$ul.is(':animated')) {
                $a.removeClass('active').next().addClass('active');
            }

            if (parseInt($ul.css('left'), 10) != -parseInt(not_active_width + left_offset, 10) && !$ul.is(':animated')) {
                $ul.animate({
                    left: parseInt($ul.css('left'), 10) - $ul.find('li').outerWidth(true),
                }, duration);
            }
        });

        $carousel.on('click', '.carousel_prev', function (e) {
            e.preventDefault();
            var $li = $ul.find('li');
            var $a = $('.active', $carousel);

            if (!$a.prev().hasClass('first') && !$ul.is(':animated')) {
                $a.removeClass('active').prev().addClass('active');
            }

            if (parseInt($ul.css('left'), 10) !== -parseInt(left_offset, 10) && !$ul.is(':animated')) {
                $ul.animate({
                    left: parseInt($ul.css('left'), 10) + $ul.find('li').outerWidth(true),
                }, duration);
            }
        });
    }

});

jQuery（文档）.ready（函数（$）{
"严格使用",；
$（窗口）.on（'load'，函数（）{
$（'.post_摘录_carousel'）。每个（函数（）{
var$this=$（this）；
后摘录定位（$this）；
});
});
$（窗口）.on（'resize'，function（））{
$（'.post_摘录_carousel'）。每个（函数（）{
var$this=$（this）；
如果（$（窗口）.width（）>760）{
$（this.find（'li'）.css（'width'，'570px'）；
}
后摘录定位（$this）；
});
});
功能post_摘录_定位（e）{
var$carousel=e；
var outer_width=$（window）.outerWidth（）；
可变容器宽度；
如果（外部宽度>1190）{
集装箱宽度=1170；
}
如果（外部宽度>960和外部宽度<1190）{
集装箱宽度=960；
}
如果（外部_宽度<960）{
容器宽度=parseInt（（9/10）*外部宽度，10）；
}
var$prev=$carousel.find（'.carousel_prev'）；
var$next=$carousel.find（'.carousel_next'）；
var duration=$carousel.data（'duration'）；
变量li_编号=$carousel.find（'li'）.length；
var$ul=$carousel.find（'ul'）；
var$li=$ul.find（'li'）；
如果（外部宽度<760）{
$li.css（'宽度'，容器宽度）；
$li.eq（1）.addClass（'active'）；
if（$li.eq（2）.hasClass（'active'））{
$li.eq（2）.removeClass（'active'）；
}
}否则，如果（外部宽度>760）{
$li.eq（1）.addClass（'active'）；
$li.eq（2）.addClass（'active'）；
}
var list_width=$carousel.find（'li'）.outerWidth（true）；
var左u偏移量；
如果（$（'.boxed_body_wrapper'）。长度）{
左偏移=列表宽度-60；
}否则{
左偏移=parseInt（列表宽度-（外部宽度-容器宽度-42）/2，10）；
}
$ul.css（{'display'：'inline block'，'width'：li_number*$carousel.find（'li'）。outerWidth（true）+'px'，'left'：-left_offset+'px'）；
var not_active_no=$carousel.find（'li'）。not（'.first'）。not（'.last'）。not（'.active'）。长度；
var not_active_width=not_active_no*$carousel.find（'li'）。外径（true）；
$carousel.on（'click'，'carousel_next'，函数（e）{
e、 预防默认值（）；
var$li=$ul.find（'li'）；
变量$a=$（'.active'，$carousel）；
如果（！$a.next（）.hasClass（'last'）&&（！$ul.is（'：animated'））{
$a.removeClass（'active'）.next（）.addClass（'active'）；
}
如果（parseInt（$ul.css（'left'），10）！=-parseInt（非活动宽度+左偏移量，10）&&！$ul.is（':animated'））{
$ul.animate({
左：parseInt（$ul.css（'left'），10）-$ul.find（'li'）。外径（true），
}，持续时间）；
}
});
$carousel.on（'click'，'carousel_prev'，函数（e）{
e、 预防默认值（）；
var$li=$ul.find（'li'）；
变量$a=$（'.active'，$carousel）；
如果（！$a.prev（）.hasClass（'first'）&（！$ul.is（'：animated'））{
$a.removeClass（'active'）.prev（）.addClass（'active'）；
}
如果（parseInt（$ul.css（'left'），10）！=-parseInt（left_offset，10）&&！$ul.is（':animated'））{
$ul.animate({
左：parseInt（$ul.css（'left'），10）+$ul.find（'li'）。外径（true），
}，持续时间）；
}
});
}
});

主要问题是，当调整大小时，会明显更改偏移，动画就会发生。第二个问题是，我调用的函数中有

（'click'）

事件，我认为这不是一种正确的编码方式，因此任何关于这方面的帮助都会有所帮助

---

代码笔在这里展示了它：

好的，我放弃了这个函数，因为函数和它里面的点击事件委托是个坏主意。我还简化了它检查最后和第一篇文章的方式

var $carousel = $('.post_excerpt_carousel');

$carousel.each(function(){

    var $this = $(this);

    var outer_width = $(window).outerWidth();
    var container_width;

    if (outer_width > 1145) {
        container_width = 1170;
    }

    if (outer_width > 960 && outer_width < 1145) {
        container_width = 960;
    }

    if (outer_width < 960) {
        container_width = parseInt((9/10)*outer_width,10);
    }

    var duration = $this.data('duration');
    var li_number = $this.find('li').length;
    var $ul = $this.find('ul');
    var $li = $ul.find('li');
    $li.removeClass('active');

    if (outer_width < 760){
        $li.css('width', container_width);
        $li.eq(1).addClass('active');
        if ($li.eq(2).hasClass('active')) {
            $li.eq(2).removeClass('active');
        }
    } else if (outer_width > 760){
        $li.eq(1).addClass('active');
        $li.eq(2).addClass('active');
    }

    var list_width = $this.find('li').outerWidth(true);
    var left_offset;

    left_offset = parseInt(list_width - (outer_width - container_width-42)/2, 10);

    $ul.css({'display': 'inline-block', 'width': li_number * $this.find('li').outerWidth(true) + 'px', 'left': -left_offset + 'px'});


    var not_active_no = $this.find('li').not('.first').not('.last').not('.active').length;
    var not_active_width = not_active_no * $this.find('li').outerWidth(true);

    $this.on('click', '.carousel_next', function (e) {
        e.preventDefault();

        if($this.find('li.last').prev().hasClass('active')){
            return;
        } else {
            var $a = $('.active', $this);

            if (!$a.next().hasClass('last') && !$ul.is(':animated')) {
                $a.removeClass('active').next().addClass('active');
            }

            if (!$ul.is(':animated')) {
                $ul.animate({
                    left: parseInt($ul.css('left'), 10) - $ul.find('li').outerWidth(true),
                }, duration);
            }
        }

    });

    $this.on('click', '.carousel_prev', function (e) {
        e.preventDefault();

        if($this.find('li.first').next().hasClass('active')){
            return;
        } else {
            var $a = $('.active', $this);

            if (!$a.prev().hasClass('first') && !$ul.is(':animated')) {
                $a.removeClass('active').prev().addClass('active');
            }

            if (!$ul.is(':animated')) {
                $ul.animate({
                    left: parseInt($ul.css('left'), 10) + $ul.find('li').outerWidth(true),
                }, duration);
            }
        }

    });

});

var$carousel=$（'.post_摘录_carousel'）；
$carousel.每个（函数（）{
var$this=$（this）；
var outer_width=$（window）.outerWidth（）；
可变容器宽度；
如果（外部宽度>1145）{
集装箱宽度=1170；
}
如果（外部宽度>960和外部宽度<1145）{
集装箱宽度=960；
}
如果（外部_宽度<960）{
容器宽度=parseInt（（9/10）*外部宽度，10）；
}
var duration=$this.data（'duration'）；
变量li_number=$this.find（'li'）.length；
var$ul=$this.find（'ul'）；
var$li=$ul.find（'li'）；
$li.removeClass（'active'）；
如果（外部宽度<760）{
$li.css（'宽度'，容器宽度）；
$li.eq（1）.addClass（'active'）；
if（$li.eq（2）.hasClass（'active'））{
$li.eq（2）.removeClass（'active'）；
}
}否则，如果（外部宽度>760）{
$li.eq（1）.addClass（'active'）；
$li.eq（2）.addClass（'active'）；
}
var list_width=$this.find（'li'）.outerWidth（true）；
var左u偏移量；
左偏移=parseInt（列表宽度-（外部宽度-容器宽度-42）/2，10）；
$ul.css（{'display'：'inline block'，'width'：li_number*$this.find（'li'）。outerWidth（true）+'px'，'left'：-left_offset+'px'）；
var not_active_no=$this.find（'li'）。not（'.first'）。not（'.last'）。not（'.active'）。长度；
变量未激活