为流离失所的图像翻转添加标题

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

来源

2011-12-02 rrfive

只是做一个JS对象，包括图像和字幕下方显示...应该工作:)

来源

2011-12-02 01:29:17 tekknolagi

为流离失所的图像翻转添加标题

回答

相关问题