Как настроить и разделить Jquery Automatic, Infinate Carousel, вращая слайд-шоу на отдельные ссылки на изображения? - PullRequest
Новая
       23

Как настроить и разделить Jquery Automatic, Infinate Carousel, вращая слайд-шоу на отдельные ссылки на изображения?

0 голосов
/ 02 октября 2010

Я недавно прочитал десятку лучших методов jquery в журнале Web дизайнеров, и мне нравится эффект карусели на 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>

1 Ответ

1 голос
/ 02 октября 2010

Насколько я понимаю, ваша проблема в том, что вы хотите, чтобы каждая запись на странице имела разные области на каждом слайде, которые являются горячими, верно?

Каждая запись

не обязательно должна быть изображением. Это просто должен быть равномерный прямоугольник. Вы можете поместить в этот прямоугольник все, что захотите: сложные DIV с якорями и ссылками и все, что вы хотите.

Простой трюк - добавить пустые после тегов IMG, а затем использовать CSS для их отображения: block, position: absolute, а также установить top, left, height, width и z-index расположите эти невидимые якоря над соответствующими частями ваших изображений.

...