为什么 jquery 动画仅适用于 Carousel Slider 中的第一个元素？

Question

我正在尝试使用 jquery 实现轮播滑块。但是，动画功能仅适用于第一个元素。我的所有元素都具有相同的 class.

尝试包括 class 每个元素 (#myCarousel .carousel-inner .item)，但不起作用。当我为这个制作动画时 - (#myCarousel .carousel-inner) 它只显示第一张图片。

这是HTML:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Carousel Slider</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="css/carousel_slider.css">
<style>
body{
        background-color:lightblue;
    }   
    h1, h2, h3 {
        text-align:center;
    }

</style>
<body>
    <div id="myCarousel" class="carousel slide">
    <div class="carousel-inner" role="listbox">
    <div class="item active">
            <img src="images/img1.jpg" alt="image 1" width="1000" height="563">
            <div class="carousel-caption">
              <h3>name</h3>
              <p>description</p>
            </div>
          </div>

          <div class="item">
            <img src="images/img2.jpg" alt="image 2" width="970" height="546">
            <div class="carousel-caption">
              <h3>name</h3>
              <p>description</p>
            </div>
          </div>
    </div>
    </div>
</body>
</html>

这是我的 jQuery :

$(document).ready(function(){
    $("#myCarousel .carousel-inner").each(function(){
    setInterval(function(){

    $("#myCarousel .carousel-inner").animate({marginLeft:-800},500,function(){
        $(this).find("div:last").after($(this).find("div:first"));
        $(this).css({marginLeft:0});

    }); 
    },5000);
    }); });

CSS 文件：

 /* Carousel slider CSS */
    #myCarousel {
        width:800px;
        height:350px;   
        margin:20px auto;
        padding-right: 40px; 
        padding-left: 40px;
        overflow: hidden;
    }


    .carousel-inner > .item > img,
      .carousel-inner > .item > a > img {
          width: 88%;
          margin: auto;
      }

我没有收到任何错误消息，但我看到的输出只是第一张滑出框架的图像。

Answer 1

由于您已经在使用 Bootstrap，您可以使用他们的滑块设置并设置您想要的延迟：

Codepen 演示 link：https://codepen.io/aystarz52/pen/dBaqLQ?editors=1010

HTML

<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img class="d-block w-100" src="data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22800%22%20height%3D%22400%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20800%20400%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_16bddd8dd45%20text%20%7B%20fill%3A%23444%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C%20monospace%3Bfont-size%3A40pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_16bddd8dd45%22%3E%3Crect%20width%3D%22800%22%20height%3D%22400%22%20fill%3D%22%23666%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%22247.3125%22%20y%3D%22218.3%22%3EFirst%20slide%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E" alt="First slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22800%22%20height%3D%22400%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20800%20400%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_16bddd8dd45%20text%20%7B%20fill%3A%23444%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C%20monospace%3Bfont-size%3A40pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_16bddd8dd45%22%3E%3Crect%20width%3D%22800%22%20height%3D%22400%22%20fill%3D%22%23666%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%22247.3125%22%20y%3D%22218.3%22%3ESecond%20slide%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E" alt="Second slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22800%22%20height%3D%22400%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20800%20400%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_16bddd8dd45%20text%20%7B%20fill%3A%23444%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C%20monospace%3Bfont-size%3A40pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_16bddd8dd45%22%3E%3Crect%20width%3D%22800%22%20height%3D%22400%22%20fill%3D%22%23666%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%22247.3125%22%20y%3D%22218.3%22%3EThird%20slide%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E" alt="Third slide">
    </div>
  </div>
</div>

Jquery

$('.carousel').carousel({
  interval: 1000
})

依赖关系

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

为什么 jquery 动画仅适用于 Carousel Slider 中的第一个元素？

Why does jquery animate only work for first element in Carousel Slider?

html

javascript

jquery

jquery-animate