2

編集：どういうわけか、私はこれを2日間いじった後、ここに投稿した直後にそれを理解することを知っていました。将来の参考のために、自動車は高さと幅のために何らかの理由で機能しないようです。サイクルプラグインで手動で定義し、異なるサイズの画像を使用している場合は、ファインダー機能を使用して最大値を見つけます。これはうまくいくようですが、誰かが「自動」を元に戻すための解決策を持っているなら、私はそれが大好きです。これでスペースを無駄にしてすみません！

作業サイクルコード：

$('.fadeit').cycle({ 
    fx:     'fade',
   *width:   240,
   *height:  320,
    speed:   300, 
    timeout: 3000, 
    next:   '.fadeit', 
    pause:   1 ,
    slideExpr: 'img.andy'
});


これは私が他の人が抱えている問題であり、私は以前に一度抱えていた問題であり、解決しました。残念ながら、以前は機能していたように見える「修正」を使用した後でも、元に戻りました（絶対位置と左または右にフロートします）。ページの読み込みが開始されると、想定どおりに画像の横にテキストが表示されます。cycle-liteが起動するとすぐに、テキストはスライドショーの下に移動するため（z-indexが低いように見えます）、非表示になります。私がどのcssconfigを使用するかは問題ではないようですが、それが問題であるに違いないと思います。フルサイクルプラグインが機能すると聞きましたが、編集できるのはボディの一部のみであり、cycle-liteはヘッドに事前に含まれているものです。また、私は常にそれを書いているわけではないので、「これはいくつかのテキストです」に実際に変更を加えることはできません。これは図書館に入りますが、私はできます

私のコード：

<div height="320" width="240" style="position:relative; float:left; padding:5px;" id="thisisit" class="fadeit">
<img height="320" width="240" alt="" src="http://news.phdcon.com/UserFiles/217/image/2750/2750-1.jpg" style="position:relative; display:none; float:left; padding:5px;" class="andy" /> 
<img height="320" width="240" alt="" src="http://news.phdcon.com/UserFiles/217/image/2750/2750-2.jpg" style="position:relative; display:none; float:left; padding:5px;" class="andy" />  
<img alt="" src="http://news.phdcon.com/UserFiles/217/image/2750/2750-3.jpg"  style="position:relative; visibility:visible; float:left; padding:5px;" class="andy"/> 
<script language="javascript" type="text/javascript"> 

window.onload=function() { 
var aclass = '.' + 'andy';
$(aclass).css('display','inline');

$('.fadeit').cycle({ 
    fx:     'fade', 
    speed:   300, 
    timeout: 3000, 
    next:   '.fadeit', 
    pause:   1 ,
    slideExpr: 'img.andy'
}); };

</script>
</div>
This is some text.
4

1 に答える 1

2

width: 'auto'cycle-liteはの各子要素を取得.fadeitして絶対位置に配置するため、ここでは機能しません。これにより、それらがフローから削除され.fadeit、有効な自動幅が0になります（以前の「修正」が表示された理由はわかりません）。動作する;フロートと絶対測位が混ざらない。）

に合法ではない属性と属性があること<div class="fadeit">に気づきました。ただし、代わりに属性内のこれらの寸法に置き換えると（ ）、元のJS（ハードコードされた幅と高さなし）が機能します。あなたの場合、HTML / CSSでハードコーディングする方がJSよりも優れているかどうかはわかりませんが、提供したサンプルコードに基づいて、そうなるのではないかと思います。heightwidth<div>stylestyle="width: 240px; height: 320px; ..."

また、サンプルコードに多くの無関係なCSSがあることに気づきました（たとえばposition: relative、.fadeitcycle-liteがこれを行うタイミング、子の画像の冗長なフロートなど）。これが私の提案されたコードです：

<div style="float: left; padding: 5px; height: 320px; width: 240px;" id="thisisit" class="fadeit">
<img height="320" width="240" alt="" src="http://news.phdcon.com/UserFiles/217/image/2750/2750-1.jpg" style="display: none;" class="andy" /> 
<img height="320" width="240" alt="" src="http://news.phdcon.com/UserFiles/217/image/2750/2750-2.jpg" style="display: none;" class="andy" />  
<img alt="" src="http://news.phdcon.com/UserFiles/217/image/2750/2750-3.jpg" class="andy"/> 
<script language="javascript" type="text/javascript"> 

window.onload=function() { 
var aclass = '.' + 'andy';
$(aclass).css('padding':'5px');

$('.fadeit').cycle({ 
    fx:     'fade', 
    speed:   300, 
    timeout: 3000, 
    next:   '.fadeit', 
    pause:   1 ,
    slideExpr: 'img.andy'
}); };

</script>
</div>
This is some text.

申し訳ありませんが、これはおそらくあなたが望んでいた答えではありません！

于 2011-05-20T14:41:58.723 に答える