0

私は最近、Web デザイナー マガジンでトップ 10 の 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="..."> を追加し、CSS を使用してそれらを display:block、position:absolute にし、上、左、高さ、幅、 z-index を使用して、これらの非表示のアンカーを画像の関連部分の上に配置します。

于 2010-10-02T17:55:49.747 に答える