>本文展示了構(gòu)建兩個簡單的自舉旋轉(zhuǎn)木馬擴(kuò)展：全屏幻燈片和帶有隨機(jī)初始幻燈片的輪播。 我們將從基本的旋轉(zhuǎn)木馬開始，然後增強(qiáng)。

密鑰概念：

• >全屏旋轉(zhuǎn)木馬：使用自定義jQuery動態(tài)調(diào)整輪播的高度以匹配窗口高度，並設(shè)置背景圖像和顏色。 一個“全屏” CSS類處理背景樣式。
• >>隨機(jī)初始幻燈片：>確定幻燈片的總數(shù)，生成一個隨機(jī)數(shù)，然後將“活動”類應(yīng)用於相應(yīng)的幻燈片和指示器。

構(gòu)建基本旋轉(zhuǎn)木製：> Bootstrap提供核心的旋轉(zhuǎn)木結(jié)構(gòu)。 每個圖像都包含a後備背景顏色的

屬性，如果圖像加載失?。?p>> data-color Javascript初始化旋轉(zhuǎn)木馬，設(shè)置間隔並禁用暫停：

<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
  <ol class="carousel-indicators">
    <li data-target="http://m.miracleart.cn/link/de1d5674932fce63c24dc80f6f1ffe9f" data-slide-to="0"></li>
    <li data-target="http://m.miracleart.cn/link/de1d5674932fce63c24dc80f6f1ffe9f" data-slide-to="1"></li>
    <li data-target="http://m.miracleart.cn/link/de1d5674932fce63c24dc80f6f1ffe9f" data-slide-to="2"></li>
  </ol>
  <div class="carousel-inner">
    <div class="carousel-item">
      <img src="/static/imghw/default1.png"  data-src="https://img.php.cn/upload/article/000/000/000/173958517524890.jpg"  class="lazy" alt="A Full-screen Bootstrap Carousel with Random Initial Image " />
      <div class="carousel-caption d-none d-md-block">
        <h5>First Image</h5>
      </div>
    </div>
    <div class="carousel-item">
      <!-- ... more slides ... -->
    </div>
    <div class="carousel-item">
      <!-- ... more slides ... -->
    </div>
  </div>
  <a class="carousel-control-prev" href="http://m.miracleart.cn/link/de1d5674932fce63c24dc80f6f1ffe9f" 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="http://m.miracleart.cn/link/de1d5674932fce63c24dc80f6f1ffe9f" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

創(chuàng)建一個全屏幻燈片：

$('.carousel').carousel({
  interval: 6000,
  pause: false
});

此增強(qiáng)使用自定義jQuery：

和CSS：

let $item = $('.carousel-item');
let $wHeight = $(window).height();

$item.height($wHeight);
$item.addClass('full-screen');

$('.carousel img').each(function() {
  let $src = $(this).attr('src');
  let $color = $(this).attr('data-color');
  $(this).parent().css({
    'background-image': 'url(' + $src + ')',
    'background-color': $color
  });
  $(this).remove();
});

$(window).on('resize', function() {
  $wHeight = $(window).height();
  $item.height($wHeight);
});

此代碼通過圖像迭代，在其父容器上設(shè)置背景圖像和顏色，刪除

元素（現(xiàn)在使用背景），然後調(diào)整窗口大小的高度。 初始幻燈片的

類是通過jQuery進(jìn)行的，以進(jìn)行更平滑的過渡。

.full-screen {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

隨機(jī)化初始幻燈片：<img alt="帶有隨機(jī)初始圖像的全屏bootstrap旋轉(zhuǎn)木馬" >> active>要在負(fù)載上顯示隨機(jī)幻燈片，請從HTML中刪除硬編碼

的類，然後添加此jQuery：

> 此代碼選擇隨機(jī)幻燈片，並將

類應(yīng)用於相應(yīng)的幻燈片和指示器。

active進(jìn)一步的自定義思想：

let $numberOfSlides = $('.carousel-item').length;
let $currentSlide = Math.floor(Math.random() * $numberOfSlides);

$('.carousel-indicators li').each(function() {
  let $slideValue = $(this).attr('data-slide-to');
  if ($currentSlide == $slideValue) {
    $(this).addClass('active');
    $item.eq($slideValue).addClass('active');
  } else {
    $(this).removeClass('active');
    $item.eq($slideValue).removeClass('active');
  }
});

>使用CSS過渡或JavaScript動畫庫添加動畫效果（淡出，比例）。 active

實(shí)現(xiàn)圖像疊加。

使用>事件隨機(jī)化下一個/上一個幻燈片。

>

• 這種增強(qiáng)的方法提供了更具動態(tài)和引人入勝的旋轉(zhuǎn)木馬。切記包括必要的bootstrap css和javaScript文件。
>

以上是帶有隨機(jī)初始圖像的全屏bootstrap旋轉(zhuǎn)木馬的詳細(xì)內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！