javascript - 无法转到模态轮播中的另一张图片

Question

正如我所说..大多数情况下我看不到模态照片库中的第一张图片。
有时我什至无法转到另一张图片。 strong>
我在 Google Chrome 上遇到了这个问题。
也许我的脚本有问题。抱歉，我不太擅长 JavaScript。

如果您能帮助我解决这个问题，我将非常高兴。
谢谢。

图书馆:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" crossorigin="anonymous">

<script async src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<script async src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" crossorigin="anonymous"></script>

<script async src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

<小时/>

脚本:

<script>
      var modal = document.getElementById('myModal');
                        var images = document.getElementsByTagName('img');
      var captionText = document.getElementById("caption");
      var i;
      for (i = 0; i < images.length; i++) {
          images[i].onclick = function () {
              modal.style.display = "block";
              modalImg.src = this.src;
              modalImg.alt = this.alt;
              captionText.innerHTML = this.alt;
          };
      }
      var span = document.getElementsByClassName("close")[0];
      span.onclick = function () {
          modal.style.display = "none";
      };
      function myFunction() {
          document.getElementById("panel").style.display = "block";};
            $('.modal').on('show.bs.modal', centerModal);$(window).on("resize", function () {$('.modal:visible').each(centerModal);});

<小时/>

模态轮播:

<div class="container">
        <div class="row content">
            <div class="gallery text-center">
                <div class="col-md-4 col-xs-6 img-responsive item"><img src="images/1.jpg" width="256" height="171" alt="" ></div>
                <div class="col-md-4 col-xs-6 img-responsive item"><img src="images/2.jpg" width="256" height="171" alt="" ></div>
                <div class="col-md-4 col-xs-6 img-responsive item"><img src="images/3.jpg" width="256" height="171" alt="" ></div>
                <div class="col-md-4 col-xs-6 img-responsive item"><img src="images/1.jpg" width="256" height="171" alt="" ></div>
                <div class="col-md-4 col-xs-6 img-responsive item"><img src="images/2.jpg" width="256" height="171" alt="" ></div>
                <div class="col-md-4 col-xs-6 img-responsive item"><img src="images/3.jpg" width="256" height="171" alt="" ></div>
                <div class="col-md-4 col-xs-6 img-responsive item"><img src="images/1.jpg" width="256" height="171" alt="" ></div>
                <div class="col-md-4 col-xs-6 img-responsive item"><img src="images/2.jpg" width="256" height="171" alt="" ></div>
                <div class="col-md-4 col-xs-6 img-responsive item"><img src="images/3.jpg" width="256" height="171" alt="" ></div>
                <div class="col-md-4 col-xs-6 img-responsive item"><img src="images/1.jpg" width="256" height="171" alt="" ></div>
                <div class="col-md-4 col-xs-6 img-responsive item"><img src="images/2.jpg" width="256" height="171" alt="" ></div>
                <div class="col-md-4 col-xs-6 img-responsive item"><img src="images/3.jpg" width="256" height="171" alt="" ></div>
                <div class="col-md-4 col-xs-6 img-responsive item"><img src="images/1.jpg" width="256" height="171" alt="" ></div>
                <div class="col-md-4 col-xs-6 img-responsive item"><img src="images/2.jpg" width="256" height="171" alt="" ></div>
                <div class="col-md-4 col-xs-6 img-responsive item"><img src="images/3.jpg" width="256" height="171" alt="" ></div>
            </div>

            <div class="modal" id="myModal" tabindex="-1" role="dialog">
                <span class="close">&times;</span>

                <div class="modal-content">

                    <div id="carousel-modal-demo" class="carousel slide" data-ride="carousel" data-interval="9999999999999">
                        <!-- Indicators -->
                        <ol class="carousel-indicators">
                            <li data-target="#carousel-modal-demo" data-slide-to="0" class="active"></li>
                            <li data-target="#carousel-modal-demo" data-slide-to="1"></li>
                            <li data-target="#carousel-modal-demo" data-slide-to="2"></li>
                            <li data-target="#carousel-modal-demo" data-slide-to="3"></li>
                            <li data-target="#carousel-modal-demo" data-slide-to="4"></li>
                            <li data-target="#carousel-modal-demo" data-slide-to="5"></li>
                            <li data-target="#carousel-modal-demo" data-slide-to="6"></li>
                            <li data-target="#carousel-modal-demo" data-slide-to="7"></li>
                            <li data-target="#carousel-modal-demo" data-slide-to="8"></li>
                            <li data-target="#carousel-modal-demo" data-slide-to="9"></li>
                            <li data-target="#carousel-modal-demo" data-slide-to="10"></li>
                            <li data-target="#carousel-modal-demo" data-slide-to="11"></li>
                            <li data-target="#carousel-modal-demo" data-slide-to="12"></li>
                            <li data-target="#carousel-modal-demo" data-slide-to="13"></li>
                            <li data-target="#carousel-modal-demo" data-slide-to="14"></li>
                        </ol>



                        <div class="carousel-inner"> 
                            <div class="item active"> 
                                <img src="images/1.jpg" alt=""/>
                            </div> 
                            <div class="item"> 
                                <img src="images/2.jpg" alt=""/>
                            </div> 
                            <div class="item"> 
                                <img src="images/3.jpg" alt=""/>
                            </div>
                            <div class="item"> 
                                <img src="images/1.jpg" alt=""/>
                            </div> 
                            <div class="item"> 
                                <img src="images/2.jpg" alt=""/>
                            </div>
                            <main class="item">
                                <img src="images/3.jpg" alt=""/>

                            </main>
                            <div class="item"> 
                                <img src="images/1.jpg" alt=""/>
                            </div> 
                            <main class="item"> 
                                <img src="images/2.jpg" alt=""/>
                            </main>
                            <main class="item"> 
                                <img src="images/3.jpg" alt=""/>
                            </main> 
                            <div class="item"> 
                                <img src="images/1.jpg" alt=""/>
                            </div>
                            <div class="item"> 
                                <img src="images/2.jpg" alt=""/>
                            </div>
                            <div class="item"> 
                                <img src="images/3.jpg" alt=""/>
                            </div> 
                            <div class="item"> 
                                <img src="images/1.jpg" alt=""/>
                            </div>
                            <p class="item"> 
                                <img src="images/2.jpg" alt=""/>
                            </p> 
                            <p class="item"> 
                                <img src="images/3.jpg" alt=""/>
                            </p>



                            <a class="left carousel-control" href="#carousel-modal-demo" role="button" data-slide="prev">
                                <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                                <span class="sr-only">Previous</span>
                            </a>
                            <a class="right carousel-control" href="#carousel-modal-demo" role="button" data-slide="next">
                                <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                                <span class="sr-only">Next</span>
                            </a> 

                        </div> 
                    </div>  
                </div> 
            </div>
        </div>

Answer 1

在fotogalerie.html
.. 在 Bootstrap 之前调用 jquery CDN。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" crossorigin="anonymous"></script>

现在您正在按照相反的顺序进行操作。因此，获取 Bootstrap's JavaScript require jQuery 错误

编辑。此外，这些 CDN 应该在主体中调用，而不是在头部中调用