내가 보그가 사용하는 것과 슬라이드 쇼 유사한 건물에 튜토리얼을 찾기 위해 노력하고있어 유사한 100 % 넓은 수평 슬라이드 쇼를 만들려면 : http://www.vogue.com/보그
내가 거의 똑같은 기능을 사용할 필요를 , 중간에있는 활성 슬라이드에는 화살표와 함께 다음 슬라이드로 이동하는 사이클 페이지 매김이 있습니다. 또한 기본 활성 슬라이드 내에 HTML 컨텐트가 있습니다. 옆에있는 슬라이드는 회색으로 표시되거나 보그에있는 것과 비슷한 장애가있는 것으로 나타납니다.
누구나 내가 사용할 수있는 jquery 자습서에 대한 좋은 제안이 있습니까? jQuery 사이클을 사용하여이 작업을 수행 할 수 있습니까?
당신은 사이클이 할 수있는,하지만 난
더 강력하고 아마이 특정 응용 프로그램에 대해 더 잘 작동 할에 상호 작용/이벤트 모델을 생각한다.
단지 몇 가지 힌트 : 자바 스크립트 : 는 불투명도를 변경하는 CSS에서
yourelement.style.opactity = x/100; yourelement.style.filter="alpha(opacity=" + x + ")";
: 당신은 아마 CSS를
div.IMG_CONTAINER_SHOW{opacity:1;filter:alpha(opacity=100);}
div.IMG_CONTAINER_HIDE{opacity:.5;filter:alpha(opacity=50);}
와 대한에게 이미지가 포함 된 div를 만든 다음 적용 할 스크롤 할 수있는 div 만들기 js 또는 jquery 함께 재생해야합니다
제안 :
특정 너비의 외부 컨테이너 div를 만듭니다. 이는 페이지에 표시된 창입니다. 더 큰 너비의 내부 컨테이너 div를 만듭니다.이 너비는 모든 이미지의 전체 내용과 동일합니다. 채우기
div.ARROW_LEFT{position:absolute;top:50%;left:100px;width:50px;height:50px;cursor:pointer;}
div.ARROW_RIGHT{position:absolute;top:50%;right:100px;width:50px;height:50px;cursor:pointer;}
사용 자바 스크립트 scrollLeft에 또는 JQuery와주기이든이 내부 용기는 및
는 CSS와 함께 가장 바깥 쪽 컨테이너 사업부 내에서 div의을 위의 불투명도 방법 중 하나를 사용하여 작동 17,451,515,
과 HTML :
<div class='ARROW_LEFT' onClick='Yourjavascrpt fuunction'><img src='yourLTarrowimg' /></div>
<div class='ARROW_RIGHT' onClick='Yourjavascrpt fuunction'><img src='yourRTarrowimg' /></div>
내 튜토리얼을 참조 할 수 있습니다, 그것은 조금 더 복잡한 뭔가이지만 도움이된다면 당신이 그것의 부분을 사용할 수 있습니다 http://electrifiedpulseone.blogspot.com/
을 여기에 행동에 있습니다 : http://electrifiedpulse.com/pictures_.html
jQuery주기 플러그인을보십시오. http://jquery.malsup.com/cycle/ – mrtsherman