2017-02-13 56 views
2

我想从滑块获取当前图像源。当它的幻灯片图像源必须在文本框中捕获,但它只取第一个图像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); 
+0

的更多钞票重复http://stackoverflow.com/questions/3021152/how-to-get-img-inside-a-particular-div -using-jquery –

回答

2

您需要使用setInterval()方法获取属性。 由于幻灯片默认时间间隔的持续时间是3秒,3000ms延迟设定给setInterval

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

thx Banzay其工作正常。 – Mohan

0

这里的问题是,在jQuery的,有些方法在接受的模式对数组工作,和其他人仅适用于单个元素。该方法attr是一种这样的方法,所述文档状态:

获得在该组匹配元素的第一元素的属性的值。

(强调我自己)

因此,在这个例子中它仅会返回第一个元素的srcfind返回的集合中。

pgwSlideshow插件将所有的幻灯片,除了“当前”幻灯片为display: none,所以你应该能够通过这个过滤得到src为“当前”幻灯片,是这样的:

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

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

+0

它显示未定义。 – Mohan

+0

我无法找到插件的托管/ CDN版本,所以我无法将CodePen放在一起进行测试。尝试记录'$('。pgwSlideshow')。find('li')。filter(':visible')' - 这是否包含任何内容? – danwellman