jQuery bxCarousel은 이미지 스크롤 전환 효과 샘플 code_jquery를 구현합니다.

BxCarousel은 다양한 구성을 갖춘 사용하기 쉬운 Jquery 이미지 스크롤 플러그인입니다. 주요 기능은 다음과 같습니다.
◆ 표시할 총 요소 수를 지정할 수 있습니다
◆ 표시할 요소 수를 지정할 수 있습니다. 매번 스크롤
◆ 자동 재생 모드
◆ 이전/다음 버튼은 그림의 흐름을 제어합니다
매개변수 의미:
display_num: 요소 수, 여러 그림 표시
move: 좌우 컨트롤 키를 클릭하면 이동할 요소의 개수, 2개의 이미지가 이동됩니다.
prev_image: 이전 요소 버튼 이미지
next_image: 다음 요소 버튼 이미지
margin: 이미지 사이의 간격, 일반적으로 10px로 설정
auto: 자동 스크롤 효과
controls: 왼쪽 및 오른쪽 컨트롤 버튼 표시 여부, 여기서 false는 왼쪽 및 오른쪽 컨트롤 버튼을 표시하지 않음을 의미합니다
auto_hover: 캐러셀 영역 위로 마우스를 가져갈 때 이미지 캐러셀을 중지할지 여부
BxCarousel 사용 및 구성
먼저 HTML 코드는 다음 형식을 따라야 합니다

코드 복사 코드는 다음과 같습니다.

• 첫 번째 콘텐츠
>
• 두 번째 콘텐츠


• 세 번째 콘텐츠


• 네 번째 콘텐츠
bxCarousel은 요소를 무제한으로 수용할 수 있습니다



jQuery 코드는 다음 형식을 준수해야 합니다

:

코드 복사 코드는 다음과 같습니다. $(document).ready(function(){

$('ul').bxCarousel({

display_num: 4, // 표시할 요소 수
move: 4, // 슬라이드를 이동할 요소 수
speed: 500, / / 슬라이드 애니메이션을 완료하는 데 걸리는 시간(밀리초)
margin:0, // 각

요소에 적용할 오른쪽 여백(픽셀 단위, "px"는 포함하지 않음)
auto: false, // 사용자 클릭 없이 자동으로 슬라이드 재생
auto_interval: 2000, // 각 자동 애니메이션 사이의 시간(밀리초)
auto_dir : 'next', // 자동 슬라이드쇼 방향(옵션: 'next', 'prev')
auto_hover: false, // 사용자가 슬라이드쇼 위로 마우스를 가져갈 때 슬라이드쇼를 중지할지 결정합니다.
next_text: 'next', // 'next' 컨트롤에 사용할 텍스트
next_image: '', // 'next' 컨트롤에 사용할 이미지
prev_text: 'prev', // 'prev' 컨트롤에 사용할 텍스트
prev_image: '', // 사용할 이미지 '이전' 컨트롤
controls: true // 컨트롤 표시 여부 결정
})
})


div.bx_container 및 div와 같은 HTML 요소 .bx_wrap은 js에 의해 생성되고 추가됩니다. bxCarousel 플러그인을 사용할 때 시각적 아름다움을 얻으려면 div.bx_container, div.bx_wrap 및 내부 하위 요소에 필요한 CSS 스타일을 설정해야 합니다.

bxCarousel은 무한 루프 메커니즘이라는 점에 유의하세요. HTML에 어떤 일이 일어나는지 보려면 다음 버튼을 계속 클릭하세요! !
bxCarousel은 이미지뿐만 아니라 다른 HTML 요소에서도 작동합니다.
자동 속성을 활성화하는 경우 속도 속성 값이 지속 시간보다 작은지 확인하세요.

예제 코드
:

코드 복사 코드는 다음과 같습니다.

jQuery实现的视频窗口伸缩、图片滚动切换效果

• 
  그림 1


• 
  그림 2


• 
  그림 3


• 
  그림 4


• 
  그림 5


• 
  그림6


• 
  그림7


• 
  그림 1


• 
  그림 2


• 
  그림 3


• 
  그림 4


• 
  그림 5


• 
  그림6


• 
  그림7

• 
  그림 1


• 
  그림 2


• 
  그림 3


• 
  그림 4


• 
  그림 5


• 
  그림6

모바일

이 예에서는 라이트박스 효과도 구현되었습니다. videobox 플러그인 덕분에 사진과 비디오가 모두 지원됩니다. jQuery Lightbox Plugin, Videobox, MooslideBox, Shadowbox 및 LightWindow와 같은 다양한 라이트박스 효과 스크립트 및 플러그인 잠깐만요.
Videobox는 페이지에 동영상을 표시하는 데 사용되는 6K 크기의 스크립트입니다. Videobox는 swfobject를 사용하여 Flash를 삽입합니다. 동영상은 Youtube, Metacafe, Google Video, iFilm 및 Flash에서 직접 설정하여 가져올 수 있습니다. 효과를 얻으려면 videobox.js, mootools.js 및 swfobject.js의 세 가지 스크립트를 사용해야 합니다.

스크롤링 및 슬라이딩과 유사한 플러그인으로는 bxSlider 등이 있습니다. bxSlider는 Slider 및 스크롤링 효과를 얻을 수 있는 jQuery 플러그인입니다. 이 플러그인은 사용이 매우 간단하고 크기가 8kb에 불과하여 매우 가볍기 때문에 사이트와 블로그에서 사용하기에 이상적입니다.