根據網址哈希開始bxSlider

Question

我希望我的bXslider幻燈片根據加載時網址中的哈希值進行更改。 如果我的網址是www.website.com/#slide1，它應該顯示第一張幻燈片，如果我的網址是www.website.com/#slide2，它應該顯示第二張幻燈片。

我能夠使其通過使用此jQuery代碼的工作：

if(typeof $.fn.bxSlider !== "undefined"){ 
      var mainSlider = $('#homepage .bxslider').bxSlider({ 
       mode:'fade', 
       pager: true, 
      }); 
      if(location.hash === "#slide1") { 
       mainSlider.goToSlide(1); 
      } else if(location.hash === "#slide2"){ 
       mainSlider.goToSlide(2); 
      } else if(location.hash === "#slide3"){ 
       mainSlider.goToSlide(3); 
      } else if(location.hash === "#slide4"){ 
       mainSlider.goToSlide(4); 
      } else if(location.hash === "#slide5"){ 
       mainSlider.goToSlide(5); 
      } else if(location.hash === "#slide6"){ 
       mainSlider.goToSlide(6); 
      } else if(location.hash === "#slide7"){ 
       mainSlider.goToSlide(7); 
      } else if(location.hash === "#slide8"){ 
       mainSlider.goToSlide(8); 
      } else if(location.hash === "#slide9"){ 
       mainSlider.goToSlide(9); 
      } else if(location.hash === "#slide10"){ 
       mainSlider.goToSlide(10); 
      } else if(location.hash === "#slide11"){ 
       mainSlider.goToSlide(11); 
      } else if(location.hash === "#slide12"){ 
       mainSlider.goToSlide(12); 
      } else if(location.hash === "#slide13"){ 
       mainSlider.goToSlide(13); 
      } else if(location.hash === "#slide14"){ 
       mainSlider.goToSlide(14); 
      } 
     } 

的問題是，當散列＃滑件或＃滑件它纔會起作用。我的代碼有問題嗎？這樣做有沒有更簡單的方法？

另外，我用下面的代碼，以不同的ID添加到我的所有.bx尋呼機-item元素：

$('#pagination .bx-pager-item').each(function(i) { 
    $(this).attr('id', 'slide'+(i+1)); 
}); 

如何添加ID作爲哈希中的href，使結束當你點擊第一張帶有slide1標識的.bx-pager-item元素時，它會帶你到另一個頁面，在URL的末尾有＃slide1的散列。

Answer 1

問題是，它只適用於散列＃1和＃2。有沒有 我的代碼有問題？這樣做有沒有更簡單的方法？

The documentation說你實例化滑塊時可以通過startSlide選項。因此，你的代碼可能看起來像這樣：

if (typeof $.fn.bxSlider !== "undefined") { 

    // Check if '#slide' is present in the hash. 
    // Replace it with an empty string so we have whatever comes after left. 
    // Convert that to an integer for the startSlide option 

    var slideId = (location.hash.indexOf('#slide') > -1) ? parseInt(location.hash.replace('#slide', ''), 10) : null; 

    if (slideId) { 

    $('#homepage .bxslider').bxSlider({ 
     mode:'fade', 
     pager: true, 
     startSlide: slideId - 1, 
    }); 

    } 

} 

雖然它並不完全是無懈可擊的。您可以添加更多支票以確保有人不會成功輸入#slide10abc。 parseInt不會拋出一個適當的索引自己的方式在這種情況下:)

如何添加ID作爲哈希在href的末尾，這樣當你 單擊第一個.bx尋呼機項目元素與幻燈片1的ID它 將帶你到另一個頁面的散列＃slide1在 的URL末尾？

我不是很肯定，如果我理解正確的，但我想你可以做這樣的事取決於HTML，你遍歷：

$('#pagination .bx-pager-item').each(function(i) { 
    var $this = $(this); 
    var currentHref = $this.attr('href'); 
    var newHref = currentHref + '/#slide' + (i+1); 
    $this.attr('href', newHref); 
}); 

再次，你可以做一些檢查，以確保你設置爲新的href實際上是有效/正確的URL。例如。檢查當前href結尾處的'/'，從而避免兩次添加。

希望以上內容能讓您更接近您的目標。如果不是，請在評論中要求進一步解釋。

---

答評論：的兩段代碼結合在回調

If you want to manipulate the slides after bxSlider is loaded, you could use the ```onSliderLoad``` callback, which is passed to the options object for the slider. It would look something like this: 

if (typeof $.fn.bxSlider !== "undefined") { 

    var slideId = (location.hash.indexOf('#slide') > -1) ? parseInt(location.hash.replace('#slide', ''), 10) : null; 

    if (slideId) { 

    $('#homepage .bxslider').bxSlider({ 
     mode:'fade', 
     pager: true, 
     startSlide: slideId - 1, 
     onSliderLoad: function() { 
     $('#pagination .bx-pager-item').each(function(i) { 
      var $this = $(this); 
      var currentHref = $this.attr('href'); 
      var newHref = currentHref + '/#slide' + (i+1); 
      $this.attr('href', newHref); 
     }); 
     } 
    }); 

    } 

}