从 Bootstrap Carousel 中的特定幻灯片开始

Question

所以我已经通读了这个问题，但我仍然无法实现代码。我已经将该 javascript 完全复制到我的 custom.js 文件中，它说我的 HTML 代码不需要修改。但是，它仍然无法正常工作。我需要改变什么？

HTML 文件的相关部分：

<!-- Nav bar -->

<ul class="dropdown-menu" role="menu">
    <li><a href="project1.html?slide=0">Project 1</a></li>
    <li><a href="project1.html?slide=1">Project 2</a></li>
    <li><a href="project1.html?slide=2">Project 3</a></li>
</ul>



<!-- Carousel -->
<div id="myCarousel" class="carousel slide" data-ride="carousel">
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#myCarousel" data-slide-to="0" class=""></li>
    <li data-target="#myCarousel" data-slide-to="1" class="active"></li>
    <li data-target="#myCarousel" data-slide-to="2" class=""></li>
  </ol>
  <div class="carousel-inner">
    <div class="item">
      <img src="img/Project1.jpg" alt="First slide">
      <div class="container">
        <div class="carousel-caption">
          <h1>Project 1</h1>
        </div>
      </div>
    </div>
    <div class="item active">
      <img src="img/Project2.jpg" alt="Second slide">
      <div class="container">
        <div class="carousel-caption">
          <h1>Project 2</h1>
        </div>
      </div>
    </div>
    <div class="item">
      <img src="img/Project3.jpg" alt="Third slide">
      <div class="container">
        <div class="carousel-caption">
          <h1>Project 3</h1>
        </div>
      </div>
    </div>
  </div>
  <a class="left carousel-control" href="http://getbootstrap.com/examples/carousel/#myCarousel" role="button" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a>
  <a class="right carousel-control" href="http://getbootstrap.com/examples/carousel/#myCarousel" role="button" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a>
</div>
<!-- /.carousel -->

我注意到第二张幻灯片有一个活动类，但删除它只会破坏轮播。

Answer 1

为了在 HTML 中手动设置活动类，您只需将该active类添加到以下元素：

• <li data-target="#myCarousel" data-slide-to="1" class="active"></li>
• <div class="item active"> <!-- for slide 2 -->

在这个演示中：

<link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

<!-- Carousel -->
<div id="myCarousel" class="carousel slide" data-ride="carousel">
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#myCarousel" data-slide-to="0" class=""></li>
    <li data-target="#myCarousel" data-slide-to="1" class="active"></li>
    <li data-target="#myCarousel" data-slide-to="2" class=""></li>
  </ol>
  <div class="carousel-inner">
    <div class="item">
      <img src="https://picsum.photos/800/300?image=1" alt="First slide">
      <div class="container">
        <div class="carousel-caption">
          <h1>Project 1</h1>
        </div>
      </div>
    </div>
    <div class="item active">
      <img src="https://picsum.photos/800/300?image=3" alt="Second slide">
      <div class="container">
        <div class="carousel-caption">
          <h1>Project 2</h1>
        </div>
      </div>
    </div>
    <div class="item">
      <img src="https://picsum.photos/800/300?image=4" alt="Third slide">
      <div class="container">
        <div class="carousel-caption">
          <h1>Project 3</h1>
        </div>
      </div>
    </div>
  </div>
  <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
      <span class="glyphicon glyphicon-chevron-left"></span>
  </a>
  <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
      <span class="glyphicon glyphicon-chevron-right"></span>
  </a>
</div>

但是，这样做不会在页面刷新期间持续存在。或者至少肯定不会以动态方式这样做。如果您打算使用 Javascript 加载活动幻灯片，那么您无需为手动设置active类而大惊小怪。只需使用您要导航到的一侧的基于零的索引调用，如下所示：.carousel(index)

$('#myCarousel').carousel(1);

$('#myCarousel').carousel(1);

$(function() {
  $('#myCarousel').carousel(1);
});    

百万美元的问题是如何让上面的 javascript 在页面加载时运行。

答案取决于您如何配置链接和站点。对于这种特殊情况，您需要传递carousel一个整数并且搜索属性始终返回一个字符串，即使它是一组数字。因此，您应该对链接的问题使用新的和改进的答案：

$(function(){

    function getParameterByName(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;
    }

    var slideNumber = getParameterByName('slide');

    $('#myCarousel').carousel(slideNumber);
});

假设您要传入一个查询字符串，?slide=那么该信息应该在window.location.search属性中可用。

StackSnippets 或 jsFiddle 似乎都没有通过location.search. 但这里有一个 plunker 演示了这个工作：

Plunker 中的工作演示

你可以看到在这个地址工作：

http://run.plnkr.co/plunks/WebsDkRLFop0oY3wHwQY/index.html?slide=1