Question

我想在幻灯片放映的每张图片下面写下文字（每张图片都包含独特的文字，应根据图片进行更改）

var isStopped = false;

function slideSwitch() {
    if (!isStopped) {
        var $active = $('#slideshow IMG.active');

        if ($active.length == 0) $active = $('#slideshow IMG:last');

        // use this to pull the images in the order they appear in the markup
        var $next = $active.next().length ? $active.next() : $('#slideshow IMG:first');

        // uncomment the 3 lines below to pull the images in random order

        // var $sibs  = $active.siblings();
        // var rndNum = Math.floor(Math.random() * $sibs.length );
        // var $next  = $( $sibs[ rndNum ] );


        $active.addClass('last-active');

        $next.css({
            opacity: 0.0
        })
            .addClass('active')
            .animate({
            opacity: 1.0
        }, 1000, function () {
            $active.removeClass('active last-active');
        });
    }
}

$(function () {
    setInterval(function () {
        slideSwitch();
    }, 1500);

    $("#slideshow").hover(function () {
        isStopped = true;
    }, function () {
        isStopped = false;
    });
});

Fiddle

Answer 1

您可以为图片标题添加统一div，其中包含图片的替代文字。

Demo

<div class="caption"></div>

并将以下内容添加到您的javascript：

$('div.caption').html("<caption>"+$active.attr('alt')+"</caption>");

Answer 2

一种可能的解决方案是从图像alt标签中获取值并显示它。

在slideSwitch function

中添加以下内容

$('selectorID/Class').text($active.attr('alt'));

<强> Demo

如何在幻灯片放映的图像下面写文字？

2 个答案: