如何在幻燈片放映中的圖像下面寫下文字？

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

一個可行的辦法是，你得到的來自image alt標籤的值並顯示它。

添加下面一行在你slideSwitchfunction

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

Demo