从另一个页面链接到某个引导程序转盘幻灯片

Linking to a certain bootstrap carousel slide from another page

本文关键字：引导程序 幻灯片 另一个 链接      更新时间：2023-09-26

我有两个.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>

我该向链接和旋转木马添加什么，使其正常工作？我找到了这个答案，但不知道如何实现它。

这是您的链接中的代码，我添加了注释来解释它的作用。

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'));

此函数只是试图查找名为"slide"的URL查询参数的值。

所以如果当前url是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>

这就是它的全部。

相关文章：