Question

我有一个JavaScript图片幻灯片放映问题，图片在彼此之间混合。它们是同一页面上的两个单独的幻灯片。我不确定我的步数是否正确。如何让它们单独运行而不是相互交叉。

<div class="col-md-6">
     <h3 align="center">DC399 Picture Gallery</h3>

    <script type="text/javascript">
        var image1 = new Image()
         image1.src = "img/banner01.jpg"

        var image2 = new Image()
         image2.src = "img/banner02.jpg"

        var image3 = new Image()
         image3.src = "img/banner03.jpg"
    </script>
    <img src="img/banner01.jpg" name="slide1" width="625" height="350">
    <script type="text/javascript">
        var step = 1

            function slideit1() {
                document.images.slide1.src = eval("image" + step + ".src")
                if (step < 3) step++
                else step = 1
                setTimeout("slideit1()", 2500)
            }
        slideit1()
    </script>
</div>
<div class="col-md-4">
     <h3>3rd Quarter All-Stars</h3>

    <script type="text/javascript">
        var image4 = new Image()
         image4.src = "img/allstars/Jane_doe.jpg"

        var image5 = new Image()
         image5.src = "img/allstars/Will_doe.jpg"

        var image6 = new Image()
         image6.src = "img/allstars/John.doe.jpg"
    </script>
    <img src="img/allstars/Jane_doe.jpg" name="slide2" width="200" height="200">
    <script type="text/javascript">
        var step = 3

            function slideit2() {
                document.images.slide2.src = eval("image" + step + ".src")
                if (step < 6) step++
                else step = 3
                setTimeout("slideit2()", 2500)
            }
        slideit2()
    </script>
</div>

Answer 1

＆＃13;

<div class="col-md-6">
  <h3 align="center">DC399 Picture Gallery</h3>

  <script type="text/javascript">
    var image1 = new Image()
     image1.src = "img1.jpg"

    var image2 = new Image()
     image2.src = "img2.jpg"

    var image3 = new Image()
     image3.src = "img3.jpg"
  </script>


  <img src="img1.jpg" name="slide1" width="625" height="350">
  <script type="text/javascript">
    var step = 1

    function slideit1() {
      document.images.slide1.src = eval("image" + step + ".src")
      if (step < 3)
        step++
        else
          step = 1
      setTimeout("slideit1()", 2500)
    }
    slideit1()
  </script>

</div>




<div class="col-md-4">
  <h3>3rd Quarter All-Stars</h3>

  <script type="text/javascript">
    var image4 = new Image()
     image4.src = "car1.jpg"

    var image5 = new Image()
     image5.src = "car2.jpg"

    var image6 = new Image()
     image6.src = "car3.jpg"
  </script>

  <img src="car1.jpg" name="slide2" width="200" height="200">
  <script type="text/javascript">
    var step2 = 4;

    function slideit2() {

      if (step2 >= 6)
        step2 = 4
      else
        step2++
        document.images.slide2.src = eval("image" + step2 + ".src")
      setTimeout("slideit2()", 2500)
    }
    slideit2()
  </script>

＆＃13;

试试这段代码。两张幻灯片上不会出现图像冲突。

Answer 2

您可能想要查看jquery Carousel插件，这可能比自己编写更容易实现。 Here是jquery carousel插件的链接。

此外，由于您已经在使用bootstrap，因此可能需要检查this。

<div class="container">
  <br>
  <div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
  <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
  <li data-target="#myCarousel" data-slide-to="1"></li>
  <li data-target="#myCarousel" data-slide-to="2"></li>
  <li data-target="#myCarousel" data-slide-to="3"></li>
</ol>

<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
  <div class="item active">
    <img src="car1.jpg" alt="car1" width="460" height="345">
  </div>

  <div class="item">
    <img src="car2.jpg" alt="Chania" width="460" height="345">
  </div>

  <div class="item">
    <img src="car3.jpg" alt="car3" width="460" height="345">
  </div>

  <div class="item">
    <img src="car4.jpg" alt="car4" width="460" height="345">
  </div>
</div>

<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" 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="#myCarousel" role="button" data-slide="next">
  <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
  <span class="sr-only">Next</span>
</a>

JavaScript幻灯片保持彼此交叉

2 个答案: