javascript - 如何使用jquery在图像上添加标题

Question

下面是来自 netcu.de 的图片幻灯片。这张幻灯片效果很好，但是如何为每张图片添加标题

<script type="text/javascript" src="http://www.netcu.de/templates/netcu/js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="http://www.netcu.de/templates/netcu/js/netcu.js"> </script>
<script type="text/javascript" src="http://www.netcu.de/templates/netcu/js/jquery.cycle.all.min.js"></script>
<script type="text/javascript" src="http://www.netcu.de/templates/netcu/js/jquery.touchwipe.js"></script>
<div id="main">
<div id="content">
<div id="imagegallery" style="border: 1px solid #666666; width: 400px; height: 300px; margin-top: 10px; margin-bottom: 10px;">
<img src="http://www.netcu.de/media/jquery/garden_i400x300.jpg" title="hi" width="400" height="300" />
<img style="display: none" src="http://www.netcu.de/media/jquery/waterfall_i400x300.jpg" width="400" height="300" /> 
<img src="http://www.netcu.de/media/jquery/autumn-leaves_i400x300.jpg" width="400" height="300" />
<img style="display: none" src="http://www.netcu.de/media/jquery/autumn-leaves_i400x300.jpg" width="400" height="300" /></div>
<p><a id="prev" href="#">&laquo;</a>&nbsp; <a id="next" href="#">&raquo;</a>
<script type="text/javascript"><!--
$(document).ready(function() {
$('#imagegallery').cycle({
    timeout: 0,
    fx: 'scrollHorz',
    next: '#next',
    prev: '#prev' 
});

$("#imagegallery").touchwipe({
    wipeLeft: function() {
        $("#imagegallery").cycle("next");
    },
    wipeRight: function() {
        $("#imagegallery").cycle("prev");
    }
});
});
// --></script>
</p></div></div>

http://jsfiddle.net/fztjs/

Answer 1

根据 JQuery Cycle 插件的常见问题解答，您可以基于此演示添加标题：

http://jquery.malsup.com/cycle/caption.html

<script type="text/javascript">
$(function() {
    $('#slideshow').cycle({
        fx:       'fadeZoom',
        timeout:   2000,
        after:     function() {
            $('#caption').html(this.alt);
        }
    });
});
</script>

<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>