2012-04-18 6 views
0

저는 이제 막 jquery에 들어가서 천천히 배우기 때문에 (부끄러운 줄 알았습니다.) 웹 디자이너로서 그 사용이 매우 중요하다는 것을 알았습니다. 어떻게 구축 할 계획입니까?

가 지금은 하나에 그림과 같은 슬라이더를 구축 할 방법을 figuire하기 위해 노력하고있어 : 내가 사이트에 소스 코드를하지만 인해 보았다 http://karmalooptv.com

드루팔에서 호스팅중인 불필요한 많습니다 이 슬라이더가 작동하는 데 필 요한 스크립트 및 스타일은 필자의 필요에 따라 필요하지 않을 수 있습니다.

화면을 가로 질러 늘리며 이미지를 순환하는 방법을 이해하지 못하고 왼쪽 또는 오른쪽으로 마지막 슬라이드에 도달하면 첫 번째/마지막 이미지로 채우고 계속 진행합니다. . 고급의

감사합니다 ...

+0

다음은 http : // jqueryfordesigners의 튜토리얼입니다.com/jquery-infinite-carousel/ –

+0

솔직히 솔직하게 우연히 만났기 때문에 나는 아무 것도 시도하지 않았습니다. Jay와 같은 방향으로 코드를 요청한 것이 아닙니다. 무한 컨베이어를 만드는 방법을 이해 했으므로 슬라이더를 어떤 화면 크기에서 늘릴 수 있었는지 궁금합니다. – user1232698

+0

그 div에 대한 픽셀 대신 백분율을 사용하도록 CSS를 설정합니다. 실험을해야합니다. –

답변

1

난 당신을 도움이 jsFiddle을 만들었습니다 http://jsfiddle.net/QEVqN/7/

슬라이더의 원시 기능이 있습니다. 내가하고있는 일을 설명해 드리겠습니다. 1) 보이는 슬라이드와 입력 한 슬라이드가 애니메이션이 필요한 것입니다. 2) 왼쪽 또는 오른쪽으로 이동할 때 입력하는 슬라이드를 올바른 위치 (오른쪽 또는 왼쪽)에 맞 춥니 다.) 그리고 오른쪽 또는 왼쪽으로 보이는 것들로 애니메이션하십시오.

많은 슬라이드 (아마 100 개)가 있고 원형 효과를 얻으면 모든 슬라이드에 애니메이션을 적용 할 필요가 없습니다. 일반적으로 모든 슬라이드가 포함 된 div에 대해 overflow : hidden을 설정하지만 그 뒤에 어떤 일이 발생하는지 볼 수는 없습니다. 오버플로가 있습니다. 숨김 http://jsfiddle.net/QEVqN/6/

+0

고마워,이게 내가 찾아 낼 수있는 가장 좋은 예다. 너비가 무한대로하는 것이 다소 불가능하다고 생각합니까? – user1232698

+0

나는 당신이 원하는 것이 확실하지 않습니다. 무한한 너비를 설정할 수는 없으며 내가 필요한 것을 상상할 수 없습니다. – gabitzish

+0

퍼센트를 사용하여 요소의 너비를 설정할 수 있으며 모든 디스플레이에 적용됩니다. – gabitzish

1

당신이 필요로하는 몇 가지 기술이 있습니다

  1. 는 첫째, 오버 플로우 - 숨겨진 그것 이외의 모든 것을 숨 깁니다 액자처럼되고있는 DIV가.
  2. 둘째, 모든 이미지가 나란히 표시되는 더 긴 div. 이 div는 오버플로 숨겨진 div 안에 있으며 같은 높이가됩니다.
  3. 콘텐츠 div는 마지막 슬라이드까지 x 위치를 뒤로 이동합니다.
  4. 그런 다음 마지막 슬라이드로 이동하면 처음과 마지막을 교체하고 즉시 마지막 슬라이드가 표시되도록 콘텐츠 div를 즉시 이동합니다. 이것이 연속 효과를 얻는 방법입니다.

# 3의 모든 애니메이션은 점진적이므로 스크롤 효과를 얻을 수 있습니다. # 4의 변경 사항은 즉각적이므로 사용자는 알 수 없습니다.

+0

속보를위한 Jonathan에게 감사드립니다. 나는이 기법을 실험 해보고 내가 얻은 것을 보게 될 것이다. – user1232698

0

체크 아웃 여기에 언급 된 슬라이드 쇼의 일부 : http://slodive.com/freebies/best-jquery-slideshow-gallery-plugins/

이것은 또한 좋은 하나입니다 http://slidesjs.com/

대부분의 jQuery 플러그인을 사용하면 순환 동작을 사용자 정의 할 수 있습니다,하지만 그들은 모두 서로 다른거야 이것에 대한 구문.

게시 한 예에서는 요소의 너비 (990 픽셀) 및 높이 (554 픽셀) CSS 속성을 설정하여 이미지를 늘릴 수있었습니다.

+0

ohh 그래서 화면 크기가 커지면 기본적으로 슬라이드 수가 무한대가됩니까? – user1232698

+0

또는 화면 크기가 커지면 어떻게해야합니까? – user1232698

+0

이미지와 슬라이더가 화면과 함께 커지도록하려면 gabitzish가 제안한대로 이미지 너비를 100 %로 설정할 수 있습니다 (마크 업과 CSS 모양에 따라 이미지의 부모 요소에서이 너비를 설정해야 할 수도 있음). like) – chicagoing

관련 문제