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

问题是，它仅在散列为＃slide1或＃slide2时有效。我的代码有问题吗？有没有更短的方式这样做？

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

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

如何将id作为哈希添加到href的末尾，这样当你点击第一个带有幻灯片1的.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-pager-item元素，其id为slide1 it 将带您进入另一页，其末尾是＃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);
});

同样，您可以进行一些检查以确保您设置为新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);
        });
      }
    });

  }

}

基于url hash启动bxSlider

1 个答案: