Question

项目链接：click here

小提琴链接：click here

我有这个滑块，我的客户想要工作，没有任何插件。

涉及的html如下： div structure

涉及的js / jQuery如下： enter image description here

以下是涉及的js的主要部分：

var newSliderWidth = $('#oCarol').width(); // container width is recalculated and updated 

     liW = newSliderWidth; // new li width
     liFW = (liW * $slider.find('li').length); // new width is calculated for the container

     $('.panel-inner li').css('width', liW); // new width is assigned to the li(s)

     $slider.width(liFW); // new width is assigned to the container

     $('.button a').on('click', function (e) { // this determines the left and right buttons' functionality

         e.preventDefault(); // prevent the default 

         if (!animating) {

             var left = Math.abs(parseInt($slider.css('left'))); // find the current slider position
             // 'side' is the amount of distance in pixels that the slider needs to move whenever a left or right arrow is pressed, respectively 
             var side = ($(this).data('direction') == 'right') ? (((left + (liW * iXS)) >= liFW) ? 0 : -(left + liW)) : ((left > 0) ? -(left - liW) : -(liFW - (liW * iXS)));
             rotate(side);

             console.log('Current position is: '+side);



         }

     });

     // whenever a screen resize happens, the slider moves to the first slide

      $('.panel-inner').animate({
          left: 0
      });

此刻，每当屏幕调整大小发生时，我必须将滑块重置为第一次滑动，否则当前滑动位置变得混乱，其中一半显示，下一张幻灯片的一半也会显示，同一时间。

我需要的是，以某种方式正确显示当前幻灯片，这样我就不必将滑块位置重置为＆＃34;左：0px＆＃34;

以下是一个示例，当我在重置＆＃39; .panel-inner＆＃39;离开：0＆＃39;： enter image description here

Answer 1

看起来这会得到预期的结果：

https://github.com/mrniko/netty-socketio/tree/netty-socketio-1.7.7

$(function () {

var conH = $('#knowledge .container').width();

$('.panel-inner li').css({width: conH});

var animating = false,
iXS = 1,
$slider = $('.panel-inner'),
liW = $slider.find('li:first').width(),
liFW = (liW*$slider.find('li').length),
first = true,
index;

$slider.width(liFW);

$(window).on('resize', function () {

    clearTimeout(timeout);

    if (first) {
        first = false;
        var positioned = parseInt($slider.css('left'));
        index = Math.round(positioned/liW);
    }

    var timeout = setTimeout(function () {

        first = true;
        var newSliderWidth = $('#oCarol').width();
        liW = newSliderWidth;
        liFW = (liW * $slider.find('li').length);

        $('.panel-inner li').css('width', liW);
        $slider.width(liFW);

        $('.button a').off('click').on('click', function(e) {

            e.preventDefault();

            if (!animating) {
                var left = Math.abs(parseInt($slider.css('left')));
                var side = ($(this).data('direction') == 'right') ? (((left + (liW * iXS)) >= liFW) ? 0 : -(left + liW)) : ((left > 0) ? -(left - liW) : -(liFW - (liW * iXS)));
                rotate(side);
            }
        });

        $('.panel-inner').css({left: index*liW});

    }, 200);
});

$(window).trigger('resize');

    var rotate = function(leftY) {
        if (!animating) {
            animating = true;
            $slider.stop(true, true).animate({left: leftY}, 1000, function () {
                animating = false;
            });
        }
    }
});

我添加了对第一次调整大小的检查，然后继续清除超时，直到用户停止调整大小。然后200ms后，重新计算并重新定位。

Answer 2

首先，您应该移动绑定按钮的点击处理程序的代码，使其位于窗口resize-handler之外。当窗口调整大小时，你会一遍又一遍地重新绑定那些点击处理程序。

其次，我认为您的代码不必要地复杂化。我认为跟踪当前显示的面板的索引更容易，并且有一个按索引滑动到面板的功能。

请注意，我正在使用＆＃34; margin-left＆＃34; css属性做滑动，而不是＆＃34; left＆＃34;。这就是我之前看到的滑动方式，但我并不是说一种方式比另一方式好。

以下是它的样子：

$(function() {
    var animating = false,
        $container = $('.panel'),
        $slider = $('.panel-inner'),
        $panels = $slider.children(),
        currentPanelIndex = 0,
        panelWidth,
        resizeTimerId = null;

    function slideTo(panelIndex) {
        animating = true;
        $slider.stop(true, true).animate({
            "margin-left": -(panelIndex * panelWidth)
        }, 1000, function () {
            animating = false;
            currentPanelIndex = panelIndex;
        });
    }

    function resizeSlider() {
        panelWidth = $container.width();
        $panels.css('width', panelWidth);
        $slider.width(panelWidth * $panels.length);
        $slider.css({ "margin-left": -(currentPanelIndex * panelWidth) });
    }

    $(window).on('resize', function() {
        clearTimeout(resizeTimerId);
        resizeTimerId = setTimeout(function () {
            resizeSlider();
        }, 100);
    });

    $('.button a').on('click', function(e) { 
        e.preventDefault();
        if (!animating) {
            var direction = $(this).data('direction');
            var panelIndex = currentPanelIndex + ((direction == 'right') ? 1 : -1);
            if (panelIndex < 0) {
                panelIndex = $panels.length - 1;
            } else if (panelIndex > ($panels.length - 1)) {
                panelIndex = 0;
            }
            slideTo(panelIndex);
        }
    });

    resizeSlider();
});

注意：当调整窗口大小以进行调整时，它可以调用slideTo(currentPanelIndex)，但随后它会被设置为动画，如果用户不断调整大小，动画将排队。

jsfiddle

计算滑块位置

2 个答案: