Question

我有两个.html页面：page1.html和page2.html

在page1.html中我有一个旋转木马

<!-- First -->
        <div class="item">
            <div class="container-fluid">
                <div class="row">
                    <h2 class="carousel-text">Item 1</h2>
                </div>
            </div>
        </div>
<!-- Second -->
        <div class="item">
            <div class="container-fluid">
                <div class="row">
                    <h2 class="carousel-text">Item 2</h2>
                </div>
            </div>
        </div>

  <!-- Third -->
        <div class="item">
            <div class="container-fluid">
                <div class="row">
                    <h2 class="carousel-text">Item 3</h2>
                </div>
            </div>
        </div>

（这是最重要的部分）

在page2.html中，我有一个链接：

<a href="page1.html">Click me to go to page 3!</a>

我要添加到链接和我的轮播中以使其全部正常工作？我找到this回答，但不明白如何实现它。

Answer 1

以下是您link的代码我添加了评论来解释它的作用。

function getSlideParameter(key) {
/*I'm not sure why would anyone choose a key with these special characters but,
* but if they do, following RegEx will replace those special characters
*/
key = key.replace(/[*+?^$.\[\]{}()|\\\/]/g, "\\$&"); // escape RegEx meta chars
//searches the URL for occurrence of &key=some number, in case key is 'slide' it's searching for &slide=some number
var match = location.search.match(new RegExp("[?&]" + key + "=([^&]+)(&|$)"));
//replaces any '+' with single space
var slide = match && decodeURIComponent(match[1].replace(/\+/g, " "));
//checking if 'slide' is an integer and not float and that 'slide' is not a string
if (Math.floor(slide) == slide && $.isNumeric(slide))
    return parseInt(slide);
else
    return 0;//if 'slide' parameter is not present or doesn't have correct values load 0th slide
}
//finally load a particular slide using qs() function
$('#myCarousel').carousel(getSlideParameter('slide'));

此功能只是试图找到名为＆＃39; slide＆＃39;的网址查询参数的值。

因此，如果当前网址为http://stackoverflow.com?hello&slide=2 getSlideParameter('slide')，则会向我们提供2。

此代码将添加到您的轮播幻灯片所在的页面，在您的情况下是第1页。

将其添加到页面底部或使用jQuery的ready（）函数。

<!-- First -->
<div class="item">
    <div class="container-fluid">
        <div class="row">
            <h2 class="carousel-text">Item 1</h2>
        </div>
    </div>
</div>
<!-- Second -->
<div class="item">
    <div class="container-fluid">
        <div class="row">
            <h2 class="carousel-text">Item 2</h2>
        </div>
    </div>
</div>

<!-- Third -->
<div class="item">
    <div class="container-fluid">
        <div class="row">
            <h2 class="carousel-text">Item 3</h2>
        </div>
    </div>
</div>
<script>
    //preparation of carousel
</script>
<!-- new script for loading a particular slide -->
<script>
    (function () {
        function getSlideParameter(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;//if 'slide' parameter is not present or doesn't have correct values load 0th slide
        }
        $('#myCarousel').carousel(getSlideParameter('slide'));
    })();
</script>

现在我们终于可以在第2页中给出特定幻灯片的链接，如下所示

<a href="page1.html?slide=1">Slide 1!</a>
<a href="page1.html?slide=3">Slide 3!</a>

这就是它的全部内容。

从另一页链接到某个bootstrap轮播幻灯片

1 个答案: