Question

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

我需要能够链接到另一页中旋转木马中的特定幻灯片。所以我会在'index.html'

上找到类似的东西：a 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（数）

将轮播循环到特定框架（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问题。

Bootstrap carousel - 指向特定幻灯片的链接

2 个答案: