Question

我想从滑块获取当前图像源。当它的幻灯片必须在文本框中捕获图像源，但它只拍摄第一张图像src而不拍摄后续图像。我正在使用pgwSlideshow插件..

HTML code，

<div class="cartBgclr">
    <a href="#cart" onclick="addToCart(this)">
        <div class="enqry-cart enqry-cart1 pull-left">
            <i class="fa fa-shopping-cart pull-left" aria-hidden="true"></i>
            <span class="pull-left">add to enquiry cart</span>
            <input type="text" name="image-path" class="image-path" value="" />
        </div>
        <h4 style="display:none;">Sandstone</h4>
    </a>
            </div>

<div class="row">
    <div class="col-sm-12">
        <ul class="pgwSlideshow add-to-cart">
            <li><img src="images/sandstone/sandstone1.jpg" alt="" /></li>
            <li><img src="images/sandstone/sandstone2.jpg" alt="" /></li>
            <li><img src="images/sandstone/sandstone3.jpg" alt="" /></li>
            <li><img src="images/sandstone/sandstone4.jpg" alt="" /></li>
            <li><img src="images/sandstone/sandstone5.jpg" alt="" /></li>
            <li><img src="images/sandstone/sandstone6.jpg" alt="" /></li>
        </ul>
    </div>
    <div class="pd20"></div>
</div>

jquery代码，

var imgSrc = $('.pgwSlideshow').find('img').attr('src');
console.log(imgSrc);

Answer 1

您需要使用setInterval（）方法获取属性。由于幻灯片显示默认间隔持续时间为3秒，因此设置3000毫秒延迟到setInterval

setInterval(function(){
  var imgSrc = $(".ps-selected > img").attr("src");
  console.log(imgSrc);
}, 3000);

Answer 2

这里的问题是在jQuery中，一些方法在get模式下处理数组，而其他方法只在单个元素上工作。 attr方法就是这样一种方法，文档说明：

获取匹配元素集中第一个元素的属性值。

（强调我自己）

因此，在此示例中，它只会返回src返回的集合中第一个元素的find。

pgwSlideshow插件会设置除“当前＆＃39;”之外的所有幻灯片。幻灯片显示为display: none，因此您应该可以按此进行过滤，以获得“当前”的src。幻灯片，例如：

var imgSrc = $('.pgwSlideshow').find('li').filter(':visible').find('img').attr('src');

你也可以使用插件自带的API - 它有一个getCurrentSlide方法，它返回当前幻灯片的索引。如果您在afterSlide函数中使用了此功能，则应该能够获得当前图像的src。

我想从滑块获取图像源？

2 个答案: