Jquery 循环调整大小

Question

我正在尝试让 Jquery Cycle 调整大小。到目前为止，我已经部分成功，它调整了大小，但幻灯片过渡有问题......我不明白为什么？这是整个页面 http://dl.dropbox.com/u/8847353/Jai_Sandhu_Design_Portfolio/index.html

我已经设法按照此 article 调整幻灯片大小在Sitepoint。通过在 JavaScript 中使用 slipResize: false 并将 !important 标签分配给 CSS 的 % width 和 % height，幻灯片将根据样式表中的百分比值调整大小。

幻灯片无法正确转换，但可以缩放!有人可以提供任何建议吗？我认为这可能与在CSS中将overflow:hidden写入幻灯片有关。

HTML

<div id="leftnav">
    <div class="slideshow">
        <img src="work/japan_11.03/hope_for_japan_1.jpg" class="a" alt="Japan 11/03: Title page" />
        <img src="work/japan_11.03/hope_for_japan_2.jpg" class="a" alt="Japan 11/03: Land of the rising sun" />
        <img src="work/japan_11.03/hope_for_japan_3.jpg" class="a" alt="Japan 11/03: Fishing for inspiration" />
        <img src="work/japan_11.03/hope_for_japan_4.jpg" class="a" alt="Japan 11/03: A little place called home" />
        <img src="work/japan_11.03/hope_for_japan_5.jpg" class="a" alt="Japan 11/03: Shinkasen" />
        <img src="work/japan_11.03/hope_for_japan_6.jpg" class="a" alt="Japan 11/03: Getting back into the swing of things" />
        <img src="work/japan_11.03/hope_for_japan_7.jpg" class="a" alt="Japan 11/03: Remembered and not forgotten" />
</div>

Javascript

$(document).ready(function() {
$('.slideshow')
.after('<div id="nav">')
.cycle({
fx: 'fade',
sync: true,     
    speedIn:  500,  
speedOut:  500,  
timeout: 10000,
pager:  '#nav',
next:   '.slideshow',
slideResize: false,
});
});

CSS

//image class properties
img.a { 
    min-width: 475.2px;
    max-width: 1342px;
    height: 92.58%;
}

//slideshow properties
.slideshow { 
    width: 92.58% !important ; 
    margin-left:7%; 
    overflow: hidden;  
}

.slideshow img { 
    height: auto !important ; 
    width: 92.58% !important; 
    position: relative !important; 
    padding: 0px; 
    background-color: #fcfcfc; 
}


.pics {  
    padding: 0;  
    margin:  0;
} 

.pics img {  
    padding: 0px;   
    background-color: #fcfcfc;  
    top:  0; 
    left: 0;
}

Answer 1

我能够通过销毁并重新创建循环、根据其中的容器和图像更新宽度和高度字段(图像的大小根据容器宽度动态调整)来做到这一点。

这是我的 JS。可能不是最好的，我想我可以将 slideResize 和 fit 字段从选项中删除，但它确实有效。

$(function(){

    var opts = {
        fx: 'scrollHorz',
        pause: 1,
        timeout: 5000,
        slideResize: 0,
        fit:1
    }

    $("#slideshow").cycle(opts);

    $(window).resize(function(){
        opts.width = $("#slideshow").width();
        opts.height = $("#slideshow img:first-child").height();
        $("#slideshow").cycle('destroy');
        $("#slideshow").cycle(opts);
    });

});