Question

我正在尝试编写一个脚本，当我调整浏览器大小时，该脚本会自动调整我的jquery Cycle库的大小。我尝试了一些已经看过的解决方案，比如Window Resize或循环选项：

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; 
}

谢谢！

Answer 1

我认为你需要研究基于％的宽度而不是目前固定的像素宽度。作为快速测试，尝试更改3个元素的宽度：950px到100％，看看会发生什么。

jquery循环调整浏览器大小

1 个答案: