jQuery的循環調整瀏覽器大小

我想編寫一個腳本，當我調整我的瀏覽器時，自動調整我的jQuery循環庫的大小。我嘗試了一些已經見過這樣的窗口大小調整的解決方案或循環選項：jQuery的循環調整瀏覽器大小

containerResize: false, 
slideResize: false, 
fit: 1

與CSS：

.slideshow li { width: 950px !important; }

不過，這並不在所有的工作，所以我不會介意有一個幫助有點...

因此，這裏是我的畫廊js代碼：

$(document).ready(function() { 

    $('.slideshow li:first').css('background', 'url(' + $(this).attr('data-cycle-image') + ') center center no-repeat').removeAttr('data-cycle-image'); 

    $('.slideshow').each(function() { 
    //var $this = $(this); 
    var $this = $(this), $ss = $this.closest('.content-slider'); 
    var prev = $ss.find('a.prev-slide'), next = $ss.find('a.next-slide, ul.slideshow li'); 

    $this.cycle({ 
     timeout:   0,        
     fx:     'fade',       
     pause:    1,        
     speedIn:   1000, 
     speedOut:   1000, 
     sync:    false, 
     containerResize: false, 
     slideResize: false, 
     fit: 1, 
     next:    next, 
     prev:    prev, 

     // LazyLoad effect 
     before: function(currSlideElement, nextSlideElement) { 
     var data_cycle_image = $(nextSlideElement).attr('data-cycle-image'); 
     if (typeof data_cycle_image !== 'undefined' && data_cycle_image !== false) { 
      $this.cycle('pause'); 
      var enlarge_preload = new Image(); 
      enlarge_preload.src = data_cycle_image; 
      enlarge_preload.onload = function() { 
       $(nextSlideElement).css('background', 'url(' + enlarge_preload.src + ') center center no-repeat').removeAttr('data-cycle-image'); 
       $this.cycle('resume'); 
       } 
      } 
     }, 

     after: function(curr,next,opts) { 
      var s = (opts.currSlide + 1) + '/' + opts.slideCount; 
      $(opts.numberscaption).html(s); 
     }, 

     numberscaption: $this.closest('.content-slider').find('div.numberscaption') 

     }); 
    }); 

    // Keyborad navigation 
    $(document.documentElement).keyup(function(event) { 
     var direction = null; 
     if (event.keyCode == 37) { 
      direction = 'prev'; 
     } else if (event.keyCode == 39) { 
      direction = 'next'; 
     } 
     if (direction != null) { 
      $('.keyboardnav').each(function(index) { 
       $('a.prev-slide, a.next-slide', this)[direction]().click(); 
      }); 
     } 
    }); 

});

的代碼是HTML：

<div class="keyboardnav content-slider"> 
<ul class="slideshow"> 
    <li data-cycle-image="gallery/1.jpg" class="first"></li> 
    <li data-cycle-image="gallery/2.jpg" ></li> 
    <li data-cycle-image="gallery/3.jpg"></li> 
      ... 
</ul> 
... 
</div>

而且CSS代碼：

.content-slider { 
    position: absolute; 
    width: 950px; 
    height: 650px; 
    top: 50%; 
    left: 50%; 
    margin: -325px 0 0 -475px; 
    padding: 0; 
    background: red; 
} 
ul.slideshow { 
    width: 950px; 
    height: 650px; 
    margin: 0; 
    padding: 0; 
    list-style: none; 
    display: block; 
    cursor: pointer; 
} 
ul.slideshow li { 
    position: relative; 
    width: 950px !important; 
    height: 650px; 
    text-indent: -9999px; 
    background-color: #000; 
    background-repeat: no-repeat; 
    background-position: center center; 
}

謝謝!!

來源

2012-03-16 Mat

我認爲你需要考慮基於％的寬度而不是固定的像素寬度。作爲一個快速測試，試着改變3個元素的寬度：950px到100％，看看會發生什麼。

來源

2012-04-29 23:22:18

jQuery的循環調整瀏覽器大小

回答

相關問題