도트로 슬라이더를 만드는 방법

페이지에 슬라이더 바를 10 도트로 만들고 싶습니다. "items.slider". 슬라이더의 각 항목을 DOT로 지정합니다. 모든 10 개의 도트는 항상 포커스가있는 1 개의 도트로 표시됩니다. 초점은 5 초마다 다음 점으로 바뀝니다. 목록 끝에 포커스가 첫 번째 점으로 돌아갑니다. 나는 캔버스를 가지고 거기에 10 작은 원을 만들려고했다도트로 슬라이더를 만드는 방법

어떻게이 최선을 할 수있는 등? 이 링크 here에서 http://jsfiddle.net/Jh73K/8/

출처

2012-06-18 gaurav jain

왜 부정 투표입니까? 캔버스에 10 개의 원이있는 캔버스를 사용해 보았습니다. 5 초마다 집중된 항목의 색상을 토글합니다. 나는 사람들이 과거에 이것을 어떻게 해결했는지에 대한 정보만을 찾고있다. 나는 HTML/CSS 레이아웃/디자인에 비교적 익숙하지 않다. –

이미 시도한 것에 대한 코드 예제 나 테스트 케이스를 제공하지 않았기 때문에 아마 downvoted되었다. [JSFiddle] (http://jsfiddle.net/)에 대한 간단한 예를 제공 할 수 있습니까? –

FAQ는 그가 시도한 코드를 게시해야한다고 말하지 않았습니다. –

봐 :

으로는 요구. 동일한 CSS/HTML을 사용하고 다음 자바 스크립트를 사용하여 활성 항목을 변경할 수 있습니다. 아래 코드는 해당 링크에서 언급 된 HTML에 대한 것임을 기억하십시오.

$(document).ready(function() { 
    setInterval(function() { 
     var o = $("ol.pagination").find(".on").removeClass("on"); 
     if ($(o).is(':last-child')) $("ol.pagination").find("li:first-child").addClass("on"); 
     else $(o).next().addClass("on"); 
    }, 5000); 
});

원하는지 확인하십시오. 편집 : 그건 그렇고, 여기에 대한 동일한 바이올린 : http://jsfiddle.net/W8kZf/.

출처

2012-06-18 23:26:32 Satyajit

내가 보자 ... thx 톤 –

캔트가 충분히 감사합니다. –

그냥 빠른 질문입니다. 이 마크 업은 CSS3를 사용합니다. CSS에서 그렇게하려면 도트 이미지를 사용해야합니까? –

도트로 슬라이더를 만드는 방법

답변

관련 문제