Question

我想了解如何在我的图片下方显示文字。每张图片都必须有文字显示。当我点击下一个图形<img>时，我希望它显示下一个<button>。出于某种原因，它会并排显示两个图像，然后转到下一个图形。也许在代码修改时我错过了一些东西。下面是jQuery和html。提前感谢您的帮助和指导。

创建一个X / HTML文档，显示一个初始图形和一个类似于表单的按钮，显示＆＃34; Next Graphic＆＃34;。

关于图形的可见描述性段落。您可以使用任何您喜欢的图形。

当用户点击该按钮时，将显示另一个图形，其中包含不同的描述性段落。

<script type="text/javascript">
$(document).ready(function() {

    $("#imgNext").click(function() {
         var $curr = $('.slideshow img:visible'),
         $next = ($curr.next().length) ? $curr.next() : $('.slideshow img').first();
         $next.css('z-index',2).fadeIn('slow', function() {
         $curr.hide().css('z-index',0);
         $next.css('z-index',1);
        });
    });

});
</script>

<div id ="text_slider">

<div/>
<button src="spi/spi2.jpg" width="50" height="50" id="imgNext">Next Graphic</button>
<br />
<div class="slideshow">
    <img class="slider_image" id="1" src="spi/spi1.jpg">
    <p>This is South Padre Island Texas. I grew up going every summer since I can remember.</p>

    <img class="slider_image" id="2" src="spi/spi2.jpg">
    <p>This is the beautiful beaches of South Padre Island. </p>
</div>
</div>

Answer 1

我建议使用http://captionjs.com/。

根据说明：

将<script src="jquery.caption.js" type="text/javascript"></script>插入您的代码中。

然后，添加CSS：

最后，初始化插件：

$(window).load(function() {
    $('img.caption').captionjs();
});

要实际添加标题：

<img src="photo.jpg" data-caption="A wonderful caption for the photo."/>

您还可以自定义插件，例如当用户将鼠标悬停在图片上时隐藏文字，或者当用户没有悬停在图片上时隐藏文字，并将标题放在图片上，而不是在它下面。

例如：

$(window).load(function() {
    $('img.caption').captionjs({
        'class_name'      : 'captionjs', // Class name for each <figure>
        'schema'          : true,        // Use schema.org markup (i.e., itemtype, itemprop)
        'mode'            : 'default',   // default | stacked | animated | hide
        'debug_mode'      : false,       // Output debug info to the JS console
        'force_dimensions': true,        // Force the dimensions in case they cannot be detected (e.g., image is not yet painted to viewport)
        'is_responsive'   : false,       // Ensure the figure and image change size when in responsive layout. Requires a container to control responsiveness!
        'inherit_styles'  : false        // Have the caption.js container inherit box-model properties from the original image
    });
});

有关详情，请参阅网页。

编辑：图片的标题是部分，因此可以更轻松地将其滑动。

jQuery在图像下添加文本

1 个答案: