基于url hash启动bxSlider

Question

我希望我的bXslider 幻灯片根据加载时 url 中的哈希值进行更改。 如果我的网址是 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);
            } 
        }

问题是，它仅在哈希为#slide1 或#slide2 时有效。我的代码有问题吗？有更短的方法吗？

另外，我使用下面的代码为我的所有 .bx-pager-item 元素添加不同的 id：

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

如何将 id 作为哈希添加到 href 的末尾，这样当您单击第一个 .bx-pager-item 元素时，id 为 slide1 时，它会将您带到另一个带有 # 哈希的页面在 URL 末尾添加幻灯片 1？

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 的末尾，以便当您 单击 ID 为 slide1 的第一个 .bx-pager-item 元素 将带您到另一个页面，其末尾带有 #slide1 的哈希值 网址？

我不太确定我是否正确理解您，但我认为您可以根据您循环的 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);
});

同样，您可以进行一些检查以确保您设置为 new href 的内容实际上是有效/正确的 URL。例如。检查当前href末尾的'/'，从而避免添加两次。

希望以上内容能让您更接近目标。如果不是，请在 cmets 中进一步解释。

---

评论答案：将两段代码组合在一个回调中

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);
        });
      }
    });

  }

}