0

我最近阅读了 Web Designer 杂志中的十大 jquery 技术，并且喜欢http://www.struttcouture.com上的轮播效果。但我想对其进行更多定制。例如，有没有办法对图像进行切片，以便每个图像的不同部分可以与 div 中的链接而不是无序列表项？

很想知道你的想法。

谢谢朱迪思

    <style>
    #gallery {
    padding:  3px;
    position:  relative;
    margin:   auto;
    height:   674px;
    width:   994px;
    overflow:  hidden;
    z-index:  1;
    padding-left: 1px;
   }
   #gallery ul {
position:relative;
width:20000px;
}
#gallery ul li {
float:left;
list-style:none outside none;
margin-right:2px;
}
 </style>
    <script src="scripts/jquery-1.4.min.js" type="text/javascript"></script>

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

     var speed = 5000;  
     var run = setInterval('rotate()', speed);     
     item_width = $('#galleryinner li').outerWidth();   
     left_value = (item_width/2) * (-1);  
     left_value = left_value-52; 
     $('#galleryinner li:first').before($('#galleryinner li:last'));  
     $('#galleryinner ul').css({'margin-left' : left_value},2000);  

    });      
    function rotate() {
     var left_indent = parseInt($('#galleryinner ul').css('margin-left')) - item_width;  
     $('#galleryinner ul').animate({'margin-left' : left_indent}, 2000, function () {  
      $('#galleryinner li:last').after($('#galleryinner li:first'));                    
      $('#galleryinner ul').css({'margin-left' : left_value});  
     });  
     return false;  
    }

    </script>
    <div id="gallery">

     <div id="galleryinner">
      <ul>
       <li><img src="images/gallery1.jpg" alt="Strutt Couture Shoes" width="520" height="390" border="0" /></li>
       <li><img src="images/gallery2.jpg" width="520" height="390" alt="Strutt Couture Shoes" /></li>
       <li><img src="images/gallery3.jpg" width="520" height="390" alt="Strutt Couture Shoes" /></li>
       <li><img src="images/gallery4.jpg" width="520" height="390" alt="Strutt Couture Shoes" /></li>
       <li><img src="images/gallery5.jpg" width="520" height="390" alt="Strutt Couture Shoes" /></li>
       <li><img src="images/gallery6.jpg" width="520" height="390" alt="Strutt Couture Shoes" /></li>
       <li><img src="images/gallery7.jpg" width="520" height="390" alt="Strutt Couture Shoes" /></li>

      </ul>
     </div>
4

1 回答 1

1

据我了解，您的问题是您希望页面上的每个条目在每张幻灯片上都有不同的热门区域，对吗？

每个 <li> 条目不一定必须是图像。它必须是一个统一的矩形。您可以将任何您想要的东西放入该矩形：带有锚点和链接的复杂 DIV 以及您想要的任何其他东西。

一个简单的技巧是在你的 IMG 标签之后添加空的 <a href="...">'s，然后使用 CSS 使它们显示：块、位置：绝对，并设置顶部、左侧、高度、宽度，和 z-index 将这些原本不可见的锚定位在图像的相关部分上方。

于 2010-10-02T17:55:49.747 回答