javascript - 使用 Flexslider 进行哈希 URL 导航

Question

我正在构建一个使用 flexslider 的网站，但我想实现一些 URL 哈希导航。基于 URL 的哈希值，我计划获取要显示的幻灯片的索引，最接近的是查看手动导航的代码，其中单击元素的索引等于幻灯片:

slider.controlNav.live(eventType, function(event) {
   event.preventDefault();
   var $this = $(this),
   target = slider.controlNav.index($this);

   if (!$this.hasClass(namespace + 'active')) {
      (target > slider.currentSlide) ? slider.direction = "next" : slider.direction = "prev";
      slider.flexAnimate(target, vars.pauseOnAction);
    }
});

于是尝试调整原理，放到Flexslider的start属性中:

$('.flexslider').flexslider({   
     start: function(slider) {
         var target = 2; // Set to test integer

          (target > slider.currentSlide) ? slider.direction = "next" : slider.direction = "prev";
          slider.flexAnimate(target);
     }
});

根据 URL 中的哈希获取相应的整数应该不是问题，但我似乎无法通过测试整数获得我需要的幻灯片。

有人对 URL 哈希和 Flexslider 有任何经验吗？

Answer 1

我一直在寻找相同的答案，并想出了答案，所以在这里提供，以防您或其他人需要它。只要我们只是讨论数字值，就非常简单。

$(window).load(function(){

    //set some variables for calculating the hash

    var index = 0, hash = window.location.hash;

    //via malsup (Cycle plugin), calculates the hash value

    if (hash) {
        index = /\d+/.exec(hash)[0];
        index = (parseInt(index) || 1) - 1;
    }

    $(".flexslider").flexslider({
        startAt: index, //now foo.html#3 will load item 3
        after:function(slider){
            window.location.hash = slider.currentSlide+1;
            //now when you navigate, your location updates in the URL
        }
    })
})

这应该可以解决问题