jQuery無限滑塊，類似於BBC主頁

我正在創建類似於BBC主頁的幻燈片。我已經設法創建它，以便您可以左右滑動，並且它將在循環中無限滾動。幻燈片功能只是使用一個無序列表，並將最後或第一個列表項添加到列表中。jQuery無限滑塊，類似於BBC主頁

我的問題是，我希望能夠跳到一個特定的幻燈片......我只是想不出一個好的方法來做到這一點。任何幫助將不勝感激。

var slider = function(transition_time, transition, transition_speed, width){  

    var self = this; var slides = []; 

    // Slide left or right 
    this.slide = function(direction){ 

     $('#slideshow-wrapper li').each(function(){ 
      slides.push($(this).attr('id')); 
     });  

     if (direction == 0)       
      indent = parseInt($('#slideshow-wrapper').css('left')) + width;   
     else 
      indent = parseInt($('#slideshow-wrapper').css('left')) - width; 

     $('#slideshow-wrapper:not(:animated)').animate({'left' : indent}, transition_speed, transition, function(){  

      if (direction == 0) 
       $('#slideshow-wrapper li:last').detach().fadeIn().prependTo($('#slideshow-wrapper')); 

      else 
       $('#slideshow-wrapper li:first').detach().fadeIn().appendTo($('#slideshow-wrapper')); 

      $('#slideshow-wrapper').css({'left' : '-' + width + 'px'}); 
     }); 
    } 
}

根據要求，這裏是一個jsfiddle的鏈接。 http://jsfiddle.net/TqAdA/21/

來源

2012-09-24 CountKyle

你可以創建一個jsFiddle嗎？ – iambriansreed

完成，http://jsfiddle.net/TqAdA/21/。 – CountKyle

從許多jQuery Slide插件之一開始並對其進行自定義。 – iambriansreed

這是BBC如何做到的。使用JQuery和類。

有一個包含你的幻燈片，也是div的包裝div。所以的div有類如：

var slideIndex = $(".wrapper").index($(".focused"))

以這樣的方式使用索引，然後你可以使用每個寬度：

<div class="wrapper> 
    <div id="dz-gridsport" class="pane pane-5" style="left: 976px;"> 
    <div id="dz-gridbbcnow" class="pane pane-0 focused" style="left: 1952px;"> 
    <div id="dz-gridentertainment" class="pane pane-1" style="left: 2928px;"> 
</div>

所以，你可以使用獲得當前重點幻燈片的索引窗格和偏移量來確定如何到達每個窗格。

希望這會有所幫助。

來源

2013-01-21 16:26:39 Andy

首先BBC不使用傳統的jquery。它使用GLOW另一個JavaScript庫。

但你可能想要你nivo slider來代替。

來源

2012-09-24 14:46:13 defau1t

在知道BBC使用發光，但我希望在jQuery中創建自己的。我已經檢出了nivo滑塊，但我希望能夠創建整個div作爲內容，而不僅僅是圖像...並顯示前一個和下一個項目被屏蔽。 – CountKyle

週期插件怎麼樣。這是最靈活的一個可用，並提供了大量的選項，也有很好的文檔。 – defau1t

jQuery無限滑塊，類似於BBC主頁

回答

相關問題