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

Link to a particular slide of a jquery slider

本文关键字：幻灯片 jquery 链接      更新时间：2023-09-26

所以我使用了一个非常基本的jquery滑块(请参阅此JSFiddle上的操作示例(。 我可以使用内容滑块单击页面上的链接("幻灯片 A"、"幻灯片 B"、"幻灯片 C"(，以便在幻灯片之间滑动。 我希望能够做的是允许访问者从网站上的另一个页面单击"幻灯片B"，该页面将链接到包含滑块的页面，然后显示幻灯片B。

也许像这样的链接中的某种哈希标签或锚点之类的东西可能会在包含内容滑块的页面上触发 Javascript 中的某些内容，以使幻灯片 B 出现：

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

使用的内容滑块脚本非常简单且小巧，因此我假设我可以在脚本中添加一些基本的东西，以识别单击以拉动幻灯片：

$(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的实际应用 - 随意分叉并帮助一个人！

提前感谢...克里斯

$(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

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

相关文章：