引导轮播-链接到特定幻灯片

Question

在html中显示当前幻灯片编号并链接到当前页面上的特定幻灯片时，我发现了很多帮助，但我的问题有点不同...

我需要能够链接到另一页中轮播中的特定幻灯片。所以我会有类似的东西：'index.html'上的href =“ page2.html＃slide2”

当用户单击此链接时，它将带他们到'page2.html'页面，并显示第二张幻灯片。

任何帮助表示赞赏。谢谢亚历克斯

Answer 1

您可以使用查询字符串，例如... www.example.com?slide=2

$(document).ready(function(){

    function getParameterByName(name) {
        name = name.replace(/[\[]/, "\\\[").replace(/[\]]/, "\\\]");
        var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
            results = regex.exec(location.search);
        return results == null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
    }

    $('#myCarousel').carousel(getParameterByName('slide'));
});

或哈希值，例如... www.example.com＃2

$(document).ready(function(){
    $('#myCarousel').carousel(window.location.hash.substring(1));
});

无论使用哪种方式，都只需从url中提取一个整数，因此您可能希望使代码更健壮，以确保仅在获得有效整数的情况下才移动轮播，并检查其是否位于有效范围内。轮播中存在的幻灯片数量的界限。

.carousel（number）

将轮播循环到特定帧（从0开始，类似于数组）。