Question

我想在我的引导轮播中使用我的 javascript 数组，以便制作一个轮播，它使用数组中的所有元素来决定应该在那里放什么图片。它还应该写出我的、

和 alt 是什么，在轮播项目上的图片但不知道如何将两者联系起来，有什么建议吗？我拥有的数组是

const data = [
    {
      src: 'italian.jpg',
      title: 'Italian cuisine',
      subtitle: 'Great italian cuisine',
      alt: 'Image of italian cuisine'
    },
    {
      src: 'mexican.jpg',
      title: 'Mexican cuisine',
      subtitle: 'Amazing mexican cuisine',
      alt: 'Image of mexican cuisine'
    },
    {
      src: 'japanese.jpg',
      title: 'Japanese cuisine',
      subtitle: 'Traditional japanese cuisine',
      alt: 'Image of japanese cuisine'
    }
  ];
document.getElementById("carousel-item").innerHTML = data;

轮播是基本的引导程序。

    <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
      <ol class="carousel-indicators">
        <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
        <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
        <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
      </ol>
      <div class="carousel-item">
        <img src="..." alt="...">
        <div class="carousel-caption d-none d-md-block">
          <h5>...</h5>
          <p>...</p>
        </div>
      </div>
        <div class="carousel-item">
          <img src="..." alt="...">
          <div class="carousel-caption d-none d-md-block">
            <h5>...</h5>
            <p>...</p>
          </div>
        </div>
        <div class="carousel-item">
          <img src="..." alt="...">
          <div class="carousel-caption d-none d-md-block">
            <h5>...</h5>
            <p>...</p>
          </div>
        </div>
      <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
      </a>
      <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
      </a>

Answer 1

要使用 javascript 创建轮播，您需要创建/获取数据数组（就像您拥有的）-> 然后在 javascript 中创建幻灯片/指示器元素，循环遍历您的数组-> 然后编写您在其中创建的 HTML循环到页面。当您将其写入页面时，您会希望它进入轮播结构，这就是为什么我们首先设置轮播的骨架，然后将幻灯片 HTML 插入其中。下面，我为幻灯片和指标创建了一个数组，并为数组中的每张图片创建了 HTML 并将其添加到相关数组中。当数组完成时，我使用 join('') 将它们添加到页面中。 Join('') 只是获取所有数组元素并将它们连接在一起形成一个字符串，这就是我们要写入页面的内容。

删除此行 document.getElementById("carousel-item").innerHTML = data; - 您没有将数组写入 HTML 元素。相反，您需要遍历数组并使用它创建幻灯片和指标。

从基本骨架开始 - 我添加了一个 div 供我们放置幻灯片。此外，我删除了 data-ride="carousel"，因为我们实际上会在循环后而不是在页面加载时激活轮播。

<div id="carouselExampleIndicators" class="carousel slide" >
  <ol class="carousel-indicators" id='carousel-indicators'>
      <!-- here is where we'll add the indicators -->
  </ol>
  <div class='carousel-inner' id='carousel-items'>
     <!-- here is where we'll add the slides -->
  </div>
  
  <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>

然后在顶部我们将在页面加载后准备好数据：

window.onload = (event) => {
   // const data = [ ... ]
   var slides=[], indicators=[], html='', activeClass
   data.forEach(item => {
     // set up the slide
     activeClass = slides.length == 0 ? ' active ' : '' ; // the carousel has to have 1 active slide when it starts or else nothing will show. We set the first one as 'active' based on the length of the array we're making (when it's 0, that means we on the first one)
     html = '<div class="carousel-item ' + activeClass + '">'
     html += '<img src="' + item.src + '" alt="' + item.alt + '">'
     html += '<div class="carousel-caption d-none d-md-block">'
     html += '<h5>' + item.title + '</h5>'
     html += '<p>' + item.subtitle + '</p>'
     html += '</div></div>'
     slides.push(html);
    
     // set up the indicator
     activeClass = indicators.length == 0 ? ' class="active" ' : '' ; // see note about the active slide above- same goes for the indicators
     html = '<li data-target="#carouselExampleIndicators" data-slide-to="' + indicators.length + '" ' + activeClass + '></li>';
     indicators.push(html);


   })

   // now add it to your carousel and fire it up!

   document.getElementById('carousel-indicators').innerHTML = indicators.join('');
   document.getElementById('carousel-slides').innerHTML = slides.join('');
   $('#carouselExampleIndicators').carousel(); // This line assumes you have jQuery loaded with Bootstrap
   

};

引导轮播中使用的 Javascript 数组

1 个答案: