0

我正在使用 jquery 循环。如果它有多个图像，它就可以工作。一张图片它不起作用。也不显示标题。这是一个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 回答