2017-10-20 1 views
0

jQuery cycle2를 사용하는 슬라이드 쇼가 있습니다. 나는 프로젝트에서 어떻게 작동해야하는지에 대한 모형과 함께 jsfiddle을 포함시켰다 : https://jsfiddle.net/b1tfx58o/2/jQuery cycle2를 사용하여 슬라이드 변경시 요소를 이동하는 방법은 무엇입니까?

측면에 탐색 링크가 있으며 가장자리에 빨간색 작은 상자가있어 nav과 정렬되도록되어있다. 링크. 예를 들어, "슬라이드 2"를 클릭하면 빨간색 상자가 슬라이드 한 다음 슬라이드 1처럼 유지됩니다. 슬라이드 1 또는 슬라이드 3을 클릭하면 테두리 선의 중간에 위치합니다. 링크. 빨간색 상자를 클릭하여 다음 슬라이드로 이동할 수도 있습니다. 그 부분은 작동하지만 링크를 클릭하면 움직이지 않습니다. 이것에 대한 도움이 많이 감사 할 것입니다!

스크립트 지금까지합니다 (JSfiddle을 확인하는 것이 더 이해가됩니다) :

var icon = $('.icon'); 
var slideshow = $('.cycle-slideshow'); 

icon.on('click', function(e){ 
    e.preventDefault(); 
    slideshow.cycle('next', function(){ 
    }); 
}); 

답변

0

을 당신은 '이'의 기능을 .getBoundingClientRect()를 실행하기 위해, 각 목록 링크에 클릭 리스너를 추가해야합니다, 클릭 한 링크를 참조하여 getBCR의 'top'값을 사용하여 아이콘 요소의 상단 위치를 변경하십시오. 프로젝트의 window.scrollY와 결합해야 할 것입니다.

여기를 참조하십시오. https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect & 행운을 빌어 요.

관련 문제