基于URL哈希的滑块 [英] URL hash based slider

问题描述

JS Fiddle

原创想法/此问题的另一个版本

注意！
这个想法的另一个版本/最初的想法已经得到解答，所以如果其他版本适合您，欢迎您：） em>

这个问题仍然存在

我遇到了麻烦。我想制作一个图像滑块。滑块包含其中的所有图像，并且当页面变成像#home这样的散列时，我希望滑块更新为新图像。滑块处于浮动状态。另一件事是我不希望它滚动传递其他图像。我只是希望它直接滚动到该图像。由于图像宽度不同，我也需要垂直滚动。我感到不好，我基本上提出了一份工作要求，所以这个是我认为是正确的。如果有人告诉我我需要做什么，我可以编写代码。

以下是JS Fiddle上的代码。我只是有这个链接，所以它可以工作：

  //这也需要在散列更新时执行/ an锚点链接被点击
 window.onLoad = function hashLogo（）{
 var hash = window.location.hash; 
 
 //图片1哈希
 var image1 = [
'＃image1'，
'#home'
]; 
 
 //图片2哈希值
 var image2 = [
'＃image2'，
'#about'
]; （image1.indexOf（hash）> -1）{
 //执行jQuery滑动
} 
 
 if（image2.indexOf（散列）> -1）{
 //执行jQuery滑动
} 
}; 
  

解决方案

我想你需要的是事件拦截hashchange事件：

  $（window）.hashchange（function（）{
 // hash 
 // alert（location.hash）; 
}）; 
  

如果您还使用Ben Alman的神话般的 hashchange插件（0.8kb），它也将确保事件被多重填充到不支持它的浏览器中。

JS Fiddle
Original Idea / Another version of this question

Attention! The other version of this idea/the original idea has been answered so if the other version works for you, your welcome :)

This question is still open

So here is my new idea that I am having trouble with. I want to make an image slider. The slider has all the images inside of it and when the page turns to a hash like #home I want the slider to update to a new image. The slider is floating. The other thing is I don't want it to scroll passed other images. I just want it to scroll directly to that image. I also needs to scroll vertically since the images are different widths. I feel bad that I am basically making a job request so this is what I think is right. I can write the code if someone tells me what I need to do.

Here is the code on JS Fiddle. I just have the link so it can be worked on:

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

解决方案

What I think you need is an event interception on the hashchange event:

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

If you also use Ben Alman's fabulous hashchange plugin (0.8kb), it will also ensure the event is polyfilled into browsers that don't support it.

这篇关于基于URL哈希的滑块的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！