javascript - slider 溢出响应

Question

我正在使用这个 slider ，一切都很好，但为什么在小屏幕上(小于 480)或在响应式 View 中它不运行？!我该如何解决这个问题？

下面的 fiddle 中有更多详细信息

http://jsfiddle.net/roXon/tMxp5/1/

  $(function() {
   var c = 1, 
       timeOut,
       fit,
       isStopped = false, 
       boxw = $('.box').outerWidth(true),
       boxh = $('.box').outerHeight(true),
       boxn = $('.box').length;

    $('#slider').width(boxw*boxn);
    $('#gal, #slider').height(boxh);
    //////////////////////////////////
    function measure() {
        var winw = $(window).width();
        fit = Math.ceil(winw/boxw)-1; // math ceil -1 to get the number of COMPLETELY visible boxes
        $('#gal').width(winw);

        $('#t').html('Boxw='+boxw+' Boxh='+boxh+' Winw='+winw+' VisibleBoxes='+ fit);
    }
    measure();

    $(window).resize(function() {
        measure();
    });
    //////////////////////////////////    
    function b(){
       cc = (c === 1) ? $('.prev').hide() : $('.prev').show();
       ccc =(c >= boxn/fit) ? $('.next').hide() : $('.next').show();    
    }    
    $('.btn').hide();
    /////////////////////////////////

    function a(cb){ 
       $('#slider').animate({left: '-'+ (boxw*fit)*(c-1) },800, cb);
    }
    ////////////////////////////////
    function auto() {
    if(isStopped){ return };
       clearTimeout(timeOut);  
       timeOut = setTimeout(function() {
       $('.btn').hide();            
       c++;             
       if (c >= (boxn/fit)+1) {
          c = 1;
        }            
          a(function(){
             auto();
          });   
       }, 2000);
    }
    auto();
    /////////////////////////////////////////////////////////////////
        $('.next').click(function() {
           c++;
           b();
           a();
        });
        $('.prev').click(function() {
           c--;
           b();
           a();
        });
    /////////////////////////////////////////////////////////////////
    $('#gal').bind('mouseenter mouseleave', function(e) {    
       ( e.type === 'mouseenter' ) ?
       ( isStopped=true, b(), clearTimeout(timeOut) ) :
       ( isStopped=false, auto() );
    });

});

谢谢

Answer 1

这是因为你的measure函数将可见框的数量设置为0

尝试将测量函数更改为:

function measure() {
    var winw = $(window).width();
    fit = Math.ceil(winw/boxw)-1; // math ceil -1 to get the number of COMPLETELY visible boxes
    $('#gal').width(winw);

    if (fit == 0) fit = 1;
    $('#t').html('Boxw='+boxw+' Boxh='+boxh+' Winw='+winw+' VisibleBoxes='+ fit);
}

它应该可以解决您的问题:http://jsfiddle.net/tMxp5/270/