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

Question

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

我需要能够链接到另一个页面的轮播中的特定幻灯片。所以我会有类似的东西：a href="page2.html#slide2" on 'index.html'

当用户单击此链接时，它会将他们带到“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(数字)

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

Answer 2

新版本和改进版本测试有效整数，默认为 0：

function qs(key) {
    key = key.replace(/[*+?^$.\[\]{}()|\\\/]/g, "\\$&"); // escape RegEx meta chars
    var match = location.search.match(new RegExp("[?&]" + key + "=([^&]+)(&|$)"));
    var slide = match && decodeURIComponent(match[1].replace(/\+/g, " "));
    if (Math.floor(slide) == slide && $.isNumeric(slide))
        return parseInt(slide);
    else
        return 0;
}
$('#myCarousel').carousel(qs('slide'));

学分转到this 和this 问题。