Question

我正在使用这个滑块，一切都很好，但为什么在小屏幕上（小于480）或响应视图它不会运行？！我该如何解决这个问题？！

以下小提琴中的更多细节

  $(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

这是因为你的度量函数将可见框的数量设置为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/

滑块溢出响应

1 个答案: