Javascript 使用Flexslider进行哈希URL导航
我正在构建一个使用flexslider的网站,但我想实现一些URL哈希导航。根据URL的散列,我计划获取我想要显示的幻灯片的索引,最近的一次是查看手动导航的代码,其中单击元素的索引等于幻灯片的索引:Javascript 使用Flexslider进行哈希URL导航,javascript,jquery,hash,flexslider,Javascript,Jquery,Hash,Flexslider,我正在构建一个使用flexslider的网站,但我想实现一些URL哈希导航。根据URL的散列,我计划获取我想要显示的幻灯片的索引,最近的一次是查看手动导航的代码,其中单击元素的索引等于幻灯片的索引: slider.controlNav.live(eventType, function(event) { event.preventDefault(); var $this = $(this), target = slider.controlNav.index($this);
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的开始属性:
$('.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有任何经验 我一直在寻找相同的答案,并找到了答案,所以这里是以防您或其他人需要它。只要我们只是讨论数值,它就相当简单
$(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
}
})
})
这就应该做到了我在寻找使用URL的锚定部分(散列)跳转到FlexSlider中的幻灯片的解决方案时遇到了这个问题。然而,Andrew的答案对我来说并不适用,可能是因为在撰写本文时,FlexSlider现在是2.6.4版,需要jQuery 1.7.0+ 我的解决方案借用了Andrew答案的第一部分,用于从URL中获取数字,然后使用FlexSlider 2.6.4中的内置帮助器字符串用于其余部分:
$(window).on('load', function () {
// Get number from hash part of URL
var index = 0, hash = window.location.hash;
if (hash) {
index = /\d+/.exec(hash)[0];
index = (parseInt(index) || 1) - 1;
}
// Initialise a basic FlexSlider
$('.flexslider').flexslider({
animation: "slide"
});
// Pass index into helper string to jump to specific slide
$('.flexslider').flexslider(index);
}
希望这能帮助那些在FlexSlider的更高版本上寻找解决方案的人:)这太棒了。如果有的话,在JS中,您可以将字符串分配给数组中的上述数字,以便能够检索给定字符串的索引。谢谢你的回答!