Question

考虑这个样本轮播：

<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
    <div class="carousel-item active">
        <img class="d-block w-100" src="..." alt="First slide">
    </div>
    <div class="carousel-item">
        <img class="d-block w-100" src="..." alt="Second slide">
    </div>
    <div class="carousel-item">
        <img class="d-block w-100" src="..." alt="Third slide">
    </div>
</div>
<a class="carousel-control-prev" href="#carouselExampleControls" 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="#carouselExampleControls" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>

你能帮助我获得旋转木马显示中活跃的图像标签的src吗？

Answer 1

找到所需的元素并获取其src属性..

//let activeEle = document.getElementsByClassName('active');
let activeEle = document.querySelector('.carousel-item.active img');
console.log(activeEle.getAttribute('src'));

<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
    <div class="carousel-item active">
        <img class="d-block w-100" src="thisisSource" alt="First slide">
    </div>
    <div class="carousel-item">
        <img class="d-block w-100" src="..." alt="Second slide">
    </div>
    <div class="carousel-item">
        <img class="d-block w-100" src="..." alt="Third slide">
    </div>
</div>
<a class="carousel-control-prev" href="#carouselExampleControls" 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="#carouselExampleControls" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>

Answer 2

您可以使用Document.querySelector()定位元素，使用Element.getAttribute()获取源代码：

document.querySelector('.carousel-item.active > img').getAttribute('src')

var activeElImgSrc = document.querySelector('.carousel-item.active > img').getAttribute('src');
console.log(activeElImgSrc);

<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
    <div class="carousel-item active">
        <img class="d-block w-100" src=".../test" alt="First slide">
    </div>
    <div class="carousel-item">
        <img class="d-block w-100" src="..." alt="Second slide">
    </div>
    <div class="carousel-item">
        <img class="d-block w-100" src="..." alt="Third slide">
    </div>
</div>
<a class="carousel-control-prev" href="#carouselExampleControls" 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="#carouselExampleControls" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>

Answer 3

使用bootstrap carousel插件中可用的事件

$('#carouselId').on('slide.bs.carousel', function (e) {
  console.log($(e.relatedTarget).find('img').prop('src'))
})

如何在carousel中获取带有活动类名的图像标记的src值？

3 个答案: