基于URL哈希的滑块

URL hash based slider

本文关键字:哈希 URL 基于      更新时间:2023-09-26

JS Fiddle
原始想法/这个问题的另一个版本

注意 这个想法的另一个版本/原始想法已经得到了回答,所以如果其他版本对你有效,欢迎:)

这个问题仍然悬而未决

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

这是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
}
};

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

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

如果你也使用Ben Alman的出色的hashchange插件(0.8kb),它也将确保事件被聚合到不支持它的浏览器中。