javascript - 向移位的图像翻转添加标题

Question

我有一个简单的图像库(主图像加上 4 个缩略图，翻转时会触发主图像交换)，需要对其进行扩展以包含标题。图像交换功能按计划工作，但我不知道如何“调整”JS 以允许包含标题。理想情况下，我希望能够向缩略图添加标题并将其显示在主图像下方。

<div class="contact">
        <h1>Heading</h1>
        <div id="gallery">
            <ul>
                <li><img src="images/thumbs/img_cart1.jpg" alt="" /></li>
                <li><img src="images/thumbs/img_cart2.jpg" alt="" /></li>
                <li><img src="images/thumbs/img_cart3.jpg" alt="" /></li>
                <li><img src="images/thumbs/img_cart4.jpg" alt="" /></li>
            </ul>
            <img src="images/img_cart1.jpg" alt="" id="main-img" />

    </div>

    <script type="text/JavaScript">
        // prepare the form when the DOM is ready 
        $(document).ready(function() {
            $("#gallery li img").hover(function(){
                $('#main-img').attr('src',$(this).attr('src').replace('thumbs/', ''));
            });
            var imgSwap = [];
             $("#gallery li img").each(function(){
                imgUrl = this.src.replace('thumbs/', '');
                imgSwap.push(imgUrl);
            });
            $(imgSwap).preload();
        });
        $.fn.preload = function() {
            this.each(function(){
                $('<img/>')[0].src = this;
            });
        }

    </script>

我们将非常感激任何帮助。

谢谢，@rr Five

Answer 1

只需创建一个 JS 对象，其中包含要在下面显示的图像和标题...应该可以:)