基于URL哈希的滑块

时间:2013-08-17 02:24:33

标签: javascript jquery html

JS Fiddle
Original Idea / Another version of this question

注意! 这个想法的另一个版本/最初的想法已得到解答,如果其他版本适合您,欢迎您:)

此问题仍然存在

所以这是我的新想法,我遇到了麻烦。我想制作一个图像滑块。滑块包含其中的所有图像,当页面变为像#home这样的哈希时,我希望滑块更新为新图像。滑块是浮动的。另一件事是我不希望它滚动传递其他图像。我只是想让它直接滚动到那个图像。我还需要垂直滚动,因为图像的宽度不同。我感觉很糟糕,我基本上是在提出工作要求所以this是我认为正确的。如果有人告诉我我需要做什么,我可以编写代码。

以下是JS Fiddle的代码。我只是有链接,所以它可以工作:

//This also need to execute when the hash is updated/an anchor link is clicked
window.onLoad = function hashLogo() {
var hash = window.location.hash;

//Image 1 Hashes
var image1 = [
    '#image1',
    '#home'
    ];

//Image 2 Hashes
var image2 = [
    '#image2',
    '#about'
    ];

if (image1.indexOf(hash) > -1) {
    //Do jQuery Sliding
}

if (image2.indexOf(hash) > -1) {
    //Do jQuery Sliding
}
};

1 个答案:

答案 0 :(得分:0)

我认为您需要的是对hashchange事件的事件拦截:

$(window).hashchange( function(){
    // Do something when the hash changes
    // alert( location.hash );
});

如果您还使用Ben Alman的精彩hashchange plugin(0.8kb),它还将确保将事件填充到不支持它的浏览器中。