0

私はjqueryサイクルを使用しています。複数の画像がある場合は機能しました。1つの画像では機能しません。キャプションも表示されません。ここにjs フィドルがあります。ありがとう

複数の画像を含むスライダーが機能しています。

<div id="main">
        <div id="slideshow" class="pics">
            <img src="http://cloud.github.com/downloads/malsup/cycle/beach1.jpg" width="200" height="200" alt="Beach 1" />
            <img src="http://cloud.github.com/downloads/malsup/cycle/beach2.jpg" width="200" height="200" alt="Beach 2" />
            <img src="http://cloud.github.com/downloads/malsup/cycle/beach3.jpg" width="200" height="200" alt="Beach 3" />
            <img src="http://cloud.github.com/downloads/malsup/cycle/beach4.jpg" width="200" height="200" alt="Beach 4" />
            <img src="http://cloud.github.com/downloads/malsup/cycle/beach5.jpg" width="200" height="200" alt="Beach 5" />
            <img src="http://cloud.github.com/downloads/malsup/cycle/beach6.jpg" width="200" height="200" alt="Beach 6" />
            <img src="http://cloud.github.com/downloads/malsup/cycle/beach7.jpg" width="200" height="200" alt="Beach 7" />
            <img src="http://cloud.github.com/downloads/malsup/cycle/beach8.jpg" width="200" height="200" alt="Beach 8" />
        </div>
        <p id="caption"></p>
</div>​
4

2 に答える 2

1

これをサイクル呼び出しの前に追加できます。

if ($("#slideshow img").length == 1) {
    $("#slideshow img").clone().appendTo($("#slideshow"))
}

デモ

于 2012-05-09T17:22:20.317 に答える
0

長さを確認せずにこれを実現する別の方法は、サイクル呼び出しの前に最初の画像のキャプションを設定することです。

アップデート：

アイテムが実際に循環されていないときにimgのaltを使用するには：

http://jsfiddle.net/lucuma/4Ts3T/7/

$(function() {
    $('#caption').html($('#slideshow img:eq(0)').attr('alt'));
    $('#slideshow').cycle({
        fx:       'fadeZoom',
        timeout:   2000,
        after:     function() {
            $('#caption').html($('img', this).attr('alt')); // get nested img's alt
        }
    });
})​

元の回答：

http://jsfiddle.net/lucuma/4Ts3T/2/

$(function() {
    $('#caption').html($('#slideshow img:eq(0)').attr('alt'));
    $('#slideshow').cycle({
        fx:       'fadeZoom',
        timeout:   2000,
        after:     function() {
            $('#caption').html(this.alt);
        }
    });
})​
于 2012-05-21T17:09:36.280 に答える