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

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

我需要能够链接到另一页面中的旋转木马中的特定幻灯片。 所以我会在’index.html’上找到类似的东西:a href =“page2.html#slide2”

当用户点击此链接时,会将其带到“page2.html”页面并显示第二张幻灯片。

任何帮助表示赞赏。 谢谢,Alex

您可以使用查询字符串,例如… http://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')); }); 

或哈希值,如… http://www.example.com#2

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

你曾经使用过,你只需要从url中提取一个整数,所以你可能想让代码更健壮一些,以确保你只是在获得一个有效的整数时移动轮播,并检查它是否在旋转木马中存在的幻灯片数量的界限。

.carousel(数字)

将轮播循环到特定帧(基于0,类似于数组)。

有效整数的新增和改进版本测试,默认为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')); 

积分去了这个和这个问题。