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

发布于 2024-11-05 09:09:21 字数 1062 浏览 0 评论 0原文

因此，我使用非常基本 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 的实际应用 - 请随意分叉并帮助其他人！

提前致谢... 克里斯

原文

So I'm using a very basic jquery slider (see a sample in action on this JSFiddle). I can click on links ("Slide A," "Slide B," "Slide C") on the page with the content slider to slide between the slides. What I would like to be able to do is allow a visitor to click on "Slide B" from another page on the website, which would link to the page containing the slider, and then show Slide B.

Perhaps something like some sort of hash tag or anchor in the link like this could trigger something in the Javascript on the page containing the content slider to make Slide B appear:

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

The content slider script I'm using is incredibly simple & small, so I'm assuming there's something basic I could add to the script that would recognize a click through to pull a slide:

$(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')}
    });
});

});

Again, see the JSFiddle in action here - feel free to fork and help a guy out!

Thanks in advance...
Chris

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

梦纸 2024-11-12 09:09:21

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

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

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

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

Then use fragments to link to a slide:
http://yourhost.com/path/to/page.html#2

Update: Removed # from fragment before using it in the selector.

回复收藏 0 原文

~没有更多了~