我想从滑块获取图像源？

Question

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

HTML代码，

<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

这里的问题是，在jQuery中，一些方法以获取模式对数组起作用，而其他方法仅对单个元素起作用。 attr 方法就是这样一种方法，文档指出：

Get the value of an attribute for the first element in the set of matched elements.

（强调我自己的）

所以在这个例子中它只会 return 集合中第一个元素的 src return 由 find 编辑。

pgwSlideshow 插件将除 'current' 幻灯片之外的所有幻灯片设置为 display: none，因此您应该能够通过此筛选以获得 src 'current' 幻灯片，类似于：

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

您也可以为此使用插件自己的 API - 它有一个 getCurrentSlide 方法，return 是当前幻灯片的索引。如果你在afterSlide函数中使用这个，你应该可以得到当前图像的src。

Answer 2

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

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

我想从滑块获取图像源？

I want to get image source from slider?

html

css

jquery

slideshow