Создание слайдера изображения jQuery

Question

Я пытаюсь создать слайдер jQuery как this.

Я не могу найти ни учебники, ни плагины в любом месте, которые бы сделали их похожими на этот.

Answer 1

Я очень рекомендую подключаемый модуль SerialScroll here является демонстрационной версией, а документация может быть найдена here.

Я создал действительно классный слайдер изображения с этим плагином и некоторым простым html. Ниже приведен код и HTML, которые я использовал.

<div id="featProd_container"> 
    <span id="previous" class="disable">&nbsp;</span> 
    <span id="next" class="step">&nbsp;</span> 

<%-- <div id="featProd_maskOver"></div>--%> 
    <div id="featProd_mask"> 
     <asp:ListView ID="lvFeatured" runat="server" GroupItemCount="2"> 
      <LayoutTemplate> 
       <div id="featProd_scroll"> 
        <div id="groupPlaceholder" runat="server" /> 
       </div> 
      </LayoutTemplate> 
      <GroupTemplate> 
       <div class="itemSet"> 
        <div id="itemPlaceholder" runat="server" /> 
       </div> 
      </GroupTemplate> 
      <GroupSeparatorTemplate></GroupSeparatorTemplate> 
      <ItemTemplate> 
       <div class="item"> 
        <a href='<%# ((string)Eval("DetailUrl")).Replace("~", "") %>'><img src='<%# Eval("SliderImageUrl") %>' /></a> 
        <div class="itemInfo"> 
         <h3><a href='<%# ((string)Eval("DetailUrl")).Replace("~", "") %>' style="color:Black;"><%# Eval("DisplayName") %></a> </h3> 
         <span><%# Eval("ProductId")%></span> 
        </div> 
       </div>   
      </ItemTemplate>  
     </asp:ListView> 
    </div> 
    <div id="jumpLinkContainer" style="display: table; margin:0 auto;"> 
     <ul id="featProd_control" style="width: 70px;"> 
      <asp:PlaceHolder ID="phJumpLinks" runat="server" /> 
     </ul> 
    </div> 
</div> 

Просто введите этот сценарий, как показано ниже, и настройте поведение и селектор элементов навигации.

<script type="text/javascript"> 
    $(document).ready(function() { loadFeaturedProducts(); }); 

    function loadFeaturedProducts() { 

     $('.item > a, .itemInfo > h3 > a').click(function() { var link = $(this).attr('href'); if (link) { document.location.href = link; } }); 

     $('#featProd_container > #featProd_mask').serialScroll({ 
      items: '#featProd_scroll > .itemSet', 
      prev: '#featProd_container > #previous', 
      next: '#featProd_container > #next', 
      //offset: -230, //when scrolling to photo, stop 230 before reaching it (from the left) 
      start: 0, //as we are centering it, start at the 2nd 
      duration: 700, 
      force: true, 
      stop: true, 
      lock: false, 
      cycle: false, //don't pull back once you reach the end 
      easing: 'easeOutQuart', //use this easing equation for a funny effect 
      jump: true, //click on the images to scroll to them 
      navigation: '#featProd_container > #jumpLinkContainer > #featProd_control > li', 
      onBefore: function(e, elem, $pane, $items, pos) { 

       var nav = $('#featProd_container > #jumpLinkContainer > #featProd_control > li'); 
       nav.removeClass("active"); nav.eq(pos).toggleClass("active"); 

       if ($items) { 
        var jq = $('#featProd_container > #next, #featProd_container > #previous').removeClass("disable"); 
        if (pos == 0) 
         $('#featProd_container > #previous').toggleClass("disable"); 
        else if (pos == ($items.length - 1)) 
         $('#featProd_container > #next').toggleClass("disable"); 

       } 
      } 
     }); 
    } 
</script> 

Answer 2

Попробуйте этот мощный Jquery слайдер

Scrollable

Answer 3

Попробуйте один в инструментах JQuery. Легко реализуется и изменяется.

http://flowplayer.org/tools/demos/scrollable/index.html

Answer 4

Я отправил сообщение в блоге, который строит шоу-слайд, который делает что-то очень похожее. Вот ссылка:

http://blog.bobcravens.com/2009/12/27/BuildingAWebAppSlideShowArea.aspx

Это займет немного изменений. Например, у меня есть несколько небольших ящиков с номерами, которые указывают текущую фотографию. Их нужно будет изменить, чтобы отобразить меню на вашем примере сайта.

Надеюсь, это даст вам достаточно информации, чтобы начать.

Это демонстрационный ролик этого слайд-шоу в действии.

http://bobcravens.com/hfs_dev/

Пожалуйста, обратите внимание, что это мой DEV плацдарм и не гарантируется долговечно. Он будет там, по крайней мере, на пару недель. Не стесняйтесь посещать, пока он длится.