通過使用jquery獲取存儲在塊中的圖像源

我爲我的網頁製作滑塊，並使用名爲「Cycle」的jquery插件。我在訪問滑塊中使用的圖像源時遇到了問題。這是相當難以解釋所以這裏是我的代碼從「頭」部分：通過使用jquery獲取存儲在塊中的圖像源

<script type="text/javascript" src="jquery-1.11.1.min.js"></script> 
<script type="text/javascript" src="jquery.cycle.all.js"></script> 
<script type="text/javascript"> 
    $('#slider').before('<ul id="pager">').cycle({ 
     fx: 'scrollHorz', 
     speed: 900, 
     timeout: 5500, 
     pause: 1, 
     pager: '#pager', 

     pagerAnchorBuilder: function(idx, slide) { 
     return '<li><a href="#"><img src="' + slide.src + '" width="120" height="65" /></a></li>'; 
     } 
    }); 
</script>

這裏是HTML的一部分：

<div id="slider_container"> 
    <div id="slider"> 
     <div class="items"> 
      <img src="1.jpg"/> 
      <div class="info"> 
       <h2>Tile Nr. 1</h2> 
      </div> 
     </div> 
     <div class="items">       
      <img src="2.jpg"/> 
      <div class="info"> 
       <h2>Tilte Nr. 2</h2> 
      </div> 
     </div> 
    </div> 
    <div id="pager"> 

    </div> 
</div>

在我slider DIV我想顯示模塊，包含每個人圖像和一些標題，但在pager div我想只顯示來自slider中使用的那些塊的圖像。我敢肯定，這個問題是在第三個javascript中的slide.src表達式中。我應該如何改變這個表達式以獲得存儲在合適的items塊中的圖像的來源？

來源

2014-11-01 Kalvis K

你能設置一個jsFiddle來源，你需要的jQuery文件嗎？

我的猜測是slide.src不是你想要的。如果slide是在DOM一個元素的引用，那麼你訪問它的「源」屬性是這樣的：$(slide).attr('src')

更新時間：

原來「滑」是包含div所以我們需要這個來代替：

$(slide).find('img').attr('src')

來源

2014-11-01 18:14:54 Scott

想你的建議，但事實並非如此工作..在我的情況下幻燈片是divs，按「項目」分類。我想訪問存儲在這些div中的圖像源 – 2014-11-01 18:32:30

對不起，您對'設置jsFiddle'有什麼意思？ – 2014-11-01 18:34:06

是的，那麼這個代碼應該工作。讓我知道如果它不通過。 jsfiddle.net是一種分享網頁代碼的流行方式。您可以快速向人們展示問題所在，並且可以快速進行更改並向您顯示他們的工作。像這樣我從你的代碼（雖然它無法找到jquery循環文件或圖像文件顯然）：http://jsfiddle.net/n16k6cab/ – Scott 2014-11-01 18:46:12

當您檢查參數slide內pagerAnchorBuilder - 函數你找到幻燈片是一個div元素與items類和含IMG元素作爲第一個子元素。所以，你可以訪問IMG和它的src屬性，像這樣：

pagerAnchorBuilder: function(idx, slide) { 
    var source = $('img', slide).attr('src'); 
    return '<li><a href="#"><img src="' + source + '" width="120" height="65" /></a></li>'; 
}

也有寫它的一些其他的方式，全部採用相同的結果：

var source = $(slide).find('img').attr('src'); 
// or in native js 
var source = slide.querySelector('img').getAttribute('src'); 
var source = slide.querySelector('img').src; 
var source = slide.firstElementChild.src

來源

2014-11-02 11:32:38

通過使用jquery獲取存儲在塊中的圖像源

回答

相關問題