Javascript 将标题添加到替换的图像滚动

我有一个简单的图像库（主图像加上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>

标题






//当DOM就绪时准备表单
$（文档）.ready（函数（）{
$（“#gallery li img”）.hover（函数（）{
$（'#main img'）.attr（'src'，$（this.attr（'src'））.replace（'thumbs/'，''）；
});
var imgSwap=[]；
$（“#图库li img”）。每个（函数（）{
imgUrl=this.src.replace（'thumbs/'，''）；
imgSwap.push（imgUrl）；
});
$（imgSwap.preload（）；
});
$.fn.preload=函数（）{
这个。每个（函数（）{
$('

任何帮助都会得到极大的回报

谢谢，

---

@rrfive

只需制作一个JS对象，该对象包含一个图像和一个标题，显示在下面……应该可以：）