Question

我正在尝试让Jquery Cycle调整大小。到目前为止，我已经取得了部分成功，它调整了大小但滑动过渡是错误的...我不明白为什么？这是整页http://dl.dropbox.com/u/8847353/Jai_Sandhu_Design_Portfolio/index.html

我设法让幻灯片显示在Sitepoint上article之后调整大小。通过在javascript中使用slideResize：false并将！important标记分配给CSS的％width和％height，幻灯片显示会根据样式表中的百分比值进行调整。

幻灯片放映不会正常转换，但会缩放！有人可以提供任何建议吗？我认为这可能与编写溢出有关：隐藏在CSS中的幻灯片中。

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

});

Answer 2

var opts = {
fx:     "fade",
speed:   400,
timeout: 3000,
next:   "#next",
prev:   "#prev",
}
$("#gallery,#gallery .slide").attr("style","")
$("#gallery").cycle("destroy");
$("#gallery").cycle(opts);

Jquery循环调整大小

2 个答案: