0

我正在使用 cycle.js，但该网站是响应式的。

我希望能够使用大图像（对于全屏版本来说足够大），然后max-width:100%在图像上使用以根据屏幕尺寸减小其宽度。

问题是cycle.js根据图像的大小使用内联样式覆盖。因此，如果是800x600这样，它将始终以该大小显示，无论包含 div 的宽度是 100px 还是 1000px

代码：

<div id="rightCol">
            <div class="slideshow">
                <img src="http://4.bp.blogspot.com/-PGEqrdJBKmc/T_xe7hoz0yI/AAAAAAAAA0w/vKDMnf-5p7o/s1600/cat+5.jpg" />
                <img src="http://4.bp.blogspot.com/-PGEqrdJBKmc/T_xe7hoz0yI/AAAAAAAAA0w/vKDMnf-5p7o/s1600/cat+5.jpg" />
                <img src="http://4.bp.blogspot.com/-PGEqrdJBKmc/T_xe7hoz0yI/AAAAAAAAA0w/vKDMnf-5p7o/s1600/cat+5.jpg" />
                <img src="http://4.bp.blogspot.com/-PGEqrdJBKmc/T_xe7hoz0yI/AAAAAAAAA0w/vKDMnf-5p7o/s1600/cat+5.jpg" />
            </div>
        </div>

右科尔{

width:72.5%;
float:right;

}

幻灯片{

width:100%

}

幻灯片img{

max-width:100%;

}

4

2 回答 2

0

当我使用 Cycle.js 但需要它做出响应时，我设法为此创建了一个修复程序。

我必须在其他图像之前添加一个具有固定宽度和高度的透明 dummy.gif 图像。

例如

<div id="slider-wrapper">

     <div id="slider">

        <img src="images/dummy.gif" width="960px" height="300px">

        <img  src="images/image1.jpg" />

        <img  src="images/image2.jpg" />

        <img  src="images/image3.jpg" />  

        <img  src="images/image4.jpg" />

    </div>
</div>

与之配套的 CSS 是：

#slider
{
    width:100%;
    height:auto;
    min-height:300px;
    max-width:960px;
}
#slider img
{
    max-width: 100%;
    height: auto;
    width: auto; 
}

这里有一个例子：http: //jacobhammond.co.uk/ - 请注意该网站还没有完成，只是一个实验。我目前正在我的实际网站上工作。

于 2013-04-15T13:51:44.377 回答
0

看看 cycle.js 的内部工作

// apparently a lot of people use image slideshows without height/width attributes on the images.
// Cycle 2.50+ requires the sizing info for every slide; this block tries to deal with that.
var requeue = false;
options.requeueAttempts = options.requeueAttempts || 0;
$slides.each(function() {
    // try to get height/width of each slide
    var $el = $(this);
    this.cycleH = (opts.fit && opts.height) ? opts.height : ($el.height() || this.offsetHeight || this.height || $el.attr('height') || 0);
    this.cycleW = (opts.fit && opts.width) ? opts.width : ($el.width() || this.offsetWidth || this.width || $el.attr('width') || 0);

    if ( $el.is('img') ) {
        // sigh..  sniffing, hacking, shrugging...  this crappy hack tries to account for what browsers do when
        // an image is being downloaded and the markup did not include sizing info (height/width attributes);
        // there seems to be some "default" sizes used in this situation
        var loadingIE   = ($.browser.msie  && this.cycleW == 28 && this.cycleH == 30 && !this.complete);
        var loadingFF   = ($.browser.mozilla && this.cycleW == 34 && this.cycleH == 19 && !this.complete);
        var loadingOp   = ($.browser.opera && ((this.cycleW == 42 && this.cycleH == 19) || (this.cycleW == 37 && this.cycleH == 17)) && !this.complete);

它需要获取图像元素的高度宽度属性。因此，在 JS 中编写一个简单的辅助函数，它可以在调整窗口大小时提供此功能。用一点谷歌搜索应该不会很难。

jquery循环在调整大小时自动适应窗口宽度

Jquery 循环调整大小

于 2013-04-14T21:48:48.703 回答