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>

任何帮助都会得到很好的接受。

谢谢， @rrfive

Answer 1

只需创建一个JS对象，其中包含一个图像和一个标题，以便显示在下面......应该可以工作：）

为移位的图像翻转添加标题

1 个答案: