jquery를 사용하여 블록에 저장된 이미지 소스 얻기

Question

내 웹 페이지의 슬라이더를 만들고 "Cycle"이라는 jquery의 플러그인을 사용하고 있습니다. 슬라이더에 사용 된 이미지 소스에 액세스 할 때 문제가 발생했습니다. 이들 각각은 포함, 나는 블록을 표시 할 내 slider 사업부에서

<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> 

: 여기

<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 부분입니다 : 그것은 내 코드는 '머리'부분에서 그래서 여기에 설명하는 것은 매우 어렵다 이미지 및 일부 제목이 있지만 pager div slider에서 사용 된 블록의 이미지 만 표시하고 싶습니다. 그 문제는 제 3의 자바 스크립트에서 slide.src 표현에 있다고 확신합니다. 해당 표현식을 변경하여 적절한 이미지 소스를 얻으려면 items 블록을 적절하게 변경해야합니까?

Answer 1

여기서 필요한 jquery 파일을 제공하는 jsFiddle을 설정할 수 있습니까?

내 생각에 slide.src은 원하는 것이 아닙니다. $(slide).attr('src')

업데이트 : slide는 DOM의 요소에 대한 참조 인 경우에, 당신은 '소스'과 같은 속성에 액세스

이 밝혀을 우리가 대신이 필요하므로 '슬라이드'가 포함 된 사업부입니다 :

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

Answer 2

당신이 슬라이드 클래스 items와 사업부 요소 인 및 첫 번째 자식 요소로 IMG 요소를 포함 찾을 α- 함수는 인수를 slidepagerAnchorBuilder 내부를 검사 . 그래서 당신은 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