链接到jquery滑块的特定幻灯片

时间:2011-05-06 01:49:48

标签: javascript jquery slider

所以我正在使用非常基本的 jquery滑块(请参阅this JSFiddle上的示例)。我可以点击页面上的链接(“幻灯片A”,“幻灯片B”,“幻灯片C”),内容滑块可以在幻灯片之间滑动。我 喜欢 能够做的是允许访问者从网站上的另一个页面点击“幻灯片B”,这将链接到包含滑块的页面,然后显示幻灯片B.

也许类似这样的链接中的某种哈希标记或锚点可以触发包含内容滑块的页面上的Javascript中的某些东西,以使幻灯片B出现:

<a href='slidepage.php#slide2>Slide B</a>

我正在使用的内容滑块脚本非常简单&amp;小,所以我假设有一些基本的东西我可以添加到脚本中,可以识别点击以拉动幻灯片:

$(document).ready(function (){
$('#button a').click(function(){
    var integer = $(this).attr('rel');
    $('#myslide .cover').animate({left:-160*(parseInt(integer)-1)})  /*----- Width of div mystuff (here 160) ------ */
    $('#button a').each(function(){
    $(this).removeClass('active');
        if($(this).hasClass('button'+integer)){
            $(this).addClass('active')}
    });
});    

});

再次,请参阅JSFiddle in action here - 随意分叉并帮助一个人!

提前致谢... 克里斯

1 个答案:

答案 0 :(得分:1)

$(document).ready(function (){
  ...
  your old code
  ...

  if(window.location.hash) {
    // Fragment exists
    var myhash = window.location.hash.substring(1);
    $("a[rel='" + myhash + "']").click();
  }
});

然后使用片段链接到幻灯片: http://yourhost.com/path/to/page.html#2

更新:在使用选择器之前从片段中删除了#