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%

}

スライドショー画像{

max-width:100%;

}

4

2 に答える 2

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 に答える