javascript - 如何在幻灯片加载时更改事件元素的 CSS 属性

Question

我有一个 ID 为 myCarousel 的 Bootstrap 轮播。

Carousel 使用 javascript 函数 setCarouselSizeStatic 设置固定高度，图像通过下面的 CSS 居中。

我有一张较小的图片，它的高度要小得多，因此它会浮到顶部。我希望图片贴在底部，同时仍然水平居中。

我想在加载下一张幻灯片之前将图片的顶部边距更改为等于 CarauselHeight - imgeHeight。

我的问题是如何实现这一目标？

这是 HTML:

<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>
  </ol>

  <!-- Wrapper for slides -->
  <div class="carousel-inner" role="listbox">
    <div class="item active">
      <img class="Image" src="http://somewhere.image1.jpg" alt="Image from google">
      <div class="carousel-caption">
          <h3>Title</h3>
          <p>Description</p>
      </div>
    </div>


    <div class="item">
      <img class="Image" src="http://somewhere.image2.jpg" alt="Image from google">
      <div class="carousel-caption">
          <h3>Title</h3>
          <p>Description</p>
      </div>
    </div>

    <div class="item">
      <img class="Image" src="http://somewhere.image3.jpg" alt="Image from google">
      <div class="carousel-caption">
        <h3>Title</h3>
        <p>Description</p>
      </div>
    </div>

  </div>

使图像居中的 CSS:

.carousel-inner > .item> img {
    margin: 0 Auto;
}

这是我的javascript:

$( document ).ready(function() {
     $('#myCarousel').carousel();
     setCarauselSizeStatic();
});

//The purpose of this function is to make the carousel the same size 
//for other images than the first without breaking responsivness
//as my first image is the biggest it all makes sense


$('#myCarousel').on('slide.bs.carousel', function () {
  //get the width of the image loaded
  var imageHeight = $('.active').height();

  //get the width of the carausel
  var carHeight = $('#myCarousel').height();

  //calculate the margin
  var margin = carHeight - imageHeight;

  //make the top margin of the item equal to CarouselHeight - imageHeight
  $(".active").css("margin", margin );
});

function setCarauselSizeStatic() {
  $("#myCarousel").css("height", $('#myCarousel').height()
  )};

Answer 1

使用以下 jQuery 代码进行修复:

$( document ).ready(function() {
 $('#myCarousel').carousel();
 setCarauselSizeStatic();
});
//declare 2 global variables.
var currentSlideHeight;
var maxSlideHeight;

$('#myCarousel').on('slide.bs.carousel', function (e) {
//set the heigth of the previous image loaded for next slide
currentSlideHeight = $('#myCarousel').height();
});

$('#myCarousel').on('slid.bs.carousel', function (e) {
//set the heigth of the current image loaded and presume its the max height image 
maxSlideHeight = $('#myCarousel').height();

// check if the maxSlideHeight is really the maximum.
if(maxSlideHeight < currentSlideHeight)
{
  // set new max slide height
  maxSlideHeight = currentSlideHeight;

  //set the carousel inner box height to the max height found till now
  setCarauselSizeStatic(maxSlideHeight);

  //for the margin adjust to show lower height images at the bottom of the carousel
  //calculate the margin of the margin difference by subtracting the lower height image value from carousel height
  var margin = maxSlideHeight - $('.active .Image').height();

  // get the current active item margin-top value
  var currentMargin = $(".active").css("margin-top");

  // check if the margin adjust not already applied to avoid re running code again and again.
  if(currentMargin != margin)
    {
        //set the margin-top of the item to the adjustment calculated
        $(".active").css("margin-top", margin );  
    }
 }
});

//The purpose of this function is to make the carousel the same size  
function setCarauselSizeStatic() {
   $(".carousel-inner").css("height", $('#myCarousel').height())
};

function setCarauselSizeStatic(customheight) {
   $(".carousel-inner").css("height", customheight)
};

[解释]

因为您没有固定的轮播高度。您需要一种动态的方式来找到轮播中最大的图像。为此，我们声明了 2 个全局变量，并添加了幻灯片发生后立即发生的 slid.bs.carousel 事件。我还添加了 setCarauselSizeStatic 的重载方法来获取高度参数并进行设置。我认为上面 jQuery 代码中的其余注释将解释会发生什么。