jquery 플러그인 bxslider 사용 예 analyze_jquery

이 기사의 예에서는 jquery 플러그인 bxslider의 사용법을 설명합니다. 참고할 수 있도록 모든 사람과 공유하세요. 구체적인 사용법은 다음과 같습니다.

먼저 해당 js 파일을 호출합니다.

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.bxslider.js"></script>

jQuery 코드 부분:

$(function(){ 
 $('#marquee').bxSlider({ 
  mode:'vertical', //默认的是水平 
  displaySlideQty:1,//显示li的个数 
  moveSlideQty: 1,//移动li的个数  
  captions: true,//自动控制 
  auto: true, 
  controls: false//隐藏左右按钮 
 }); 
});

HTML 구조는 다음과 같습니다.

<div style="width:450px; height:296px; float:left; 
overflow:hidden; margin-left:200px;">
 <ul id="marquee">
  <li>
  <img src="img/1.jpg" alt="banner_美容" 
  style="width:450px; height:296px;">
  </li>
  <li>
  <img src="img/2.jpg" alt="banner_美容"
  style="width:450px; height:296px;">
  </li>
 </ul>
</div>

CSS는 왼쪽 및 오른쪽 버튼 스타일을 정의합니다.

.bx-prev{ 
width:12px; height:26px; 
background:#f00;text-indent: -999999px;z-index: 999; 
position: absolute; float:left; left:455px; top:110px;
}
.bx-next{ 
width:12px; height:26px; 
background:#f00; text-indent: -999999px;
z-index: 999; 
position: absolute; top:110px;left:-15px;
}

매개변수 설명:

bxSlider 세부 구성 매개변수:
bxSlider에는 다양한 구성 매개변수가 있으므로 매개변수를 사용하여 다양한 슬라이더 효과를 만들 수 있습니다.

모드: 'horizontal', // 'horizontal', 'vertical', 'fade'는 슬라이더 스크롤 방향을 정의합니다.
InfiniteLoop: true, // true, false - 마지막 무한 루프 이후 첫 번째 슬라이드 표시
hideControlOnEnd: false, // true, false - true인 경우 마지막 슬라이드에서는 '다음' 컨트롤을 숨기고 첫 번째 슬라이드에서는 '이전' 컨트롤을 숨깁니다. true로 설정하면 마지막 슬라이드와 앞 슬라이드에서 "다음"을 숨깁니다. 따라서 필름 "이전"
컨트롤: true, // true, false - 이전 및 다음은 "이전" 및 "다음" 버튼을 표시할지 여부를 제어합니다.
speed: 500, // 정수 - ms 단위, 슬라이드 전환이 차지하는 시간 Speed, 단위는 밀리초
easing: 'swing', // jquery.easing.1.3.js와 함께 사용 - 사용 가능한 옵션은 http://gsgd.co.uk/sandbox/jquery/easing/ 참조
호출기: true, // true / false - 호출기 표시
pagerSelector: null, // jQuery 선택기 - 호출기를 포함하는 요소 예: '#pager'
pagerType: 'full', // 'full', 'short' - 'full' 호출기에 1,2,3이 표시되는 경우... 'short' 호출기에 1/4가 표시되는 경우 전체가 설정된 경우 1, 2, 3이 표시됩니다. 표시됩니다..., 짧게 설정하면 1/4이 표시됩니다.
pagerLocation: 'bottom', // 'bottom', 'top' - 호출기 위치 페이지 번호 위치
pagerShortSeparator: '/', // 문자열 - 예: 'of' 페이저는 4개의 페이지 구분 기호 중 1개를 표시합니다.
pagerActiveClass: 'pager-active', // 문자열 - 활성 호출기 링크에 첨부된 클래스 이름 현재 페이지 번호의 className
nextText: 'next', // 문자열 - '다음' 컨트롤에 표시되는 텍스트 다음 페이지의 텍스트
nextImage: '', // 문자열 - '다음' 제어에 사용되는 이미지의 파일 경로. 예: 'images/next.jpg' 다음 페이지를 이미지로 설정할 수 있습니다
nextSelector: null, // jQuery 선택기 - 다음 컨트롤을 포함하는 요소입니다. 예: '#next'
prevText: 'prev', // 문자열 - '이전' 컨트롤에 표시되는 텍스트 이전 페이지의 텍스트
prevImage: '', // 문자열 - '이전' 제어에 사용되는 이미지의 파일 경로. 예: 'images/prev.jpg' 이전 페이지의 그림
prevSelector: null, // jQuery 선택기 - 이전 컨트롤을 포함하는 요소입니다. 예: '#next'
captions: false, // true, false - 이미지 캡션 표시 (이미지 'title' 태그 읽기) 이미지 제목 표시 여부와 이미지의 title 속성 내용 읽기 여부.

captionsSelector: null, // jQuery 선택기 - 캡션을 포함하는 요소 예: '#captions'
auto: false, // true, false - 슬라이드쇼를 자동으로 변경합니다. 슬라이드쇼가 자동으로 스크롤됩니다.
autoDirection: 'next', // 'next', 'prev' - 자동 스크롤 순서를 따라 자동 표시가 진행되는 방향
autoControls: false, // true, false - 자동 스크롤 컨트롤 키 자동 표시에 대한 '시작' 및 '중지' 컨트롤 표시
autoControlsSelector: null, // jQuery 선택기 - 자동 컨트롤을 포함하는 요소입니다. 예: '#auto-controls'
autoStart: true, // true, false - false인 경우 쇼는 '시작' 컨트롤이 활성화될 때까지 기다립니다.
autoHover: false, // true, false - true인 경우 마우스 오버 시 표시가 일시 중지됩니다. 마우스 오버를 설정하면 자동 스크롤이 일시 중지됩니다.
autoDelay: 0, // 정수 - ms 단위, 자동 표시를 시작하기 전의 시간
Pause: 3000, // 정수 - ms 단위, 각 슬라이드 전환 전환 시간 사이의 지속 시간
startText: 'start', // 문자열 - 'start' 제어 시작 버튼 텍스트에 표시되는 텍스트
startImage: '', // 문자열 - '시작' 제어에 사용되는 이미지의 파일 경로. 예: 'images/start.jpg' 시작 버튼 이미지
stopText: 'stop', // 문자열 - 'stop' 컨트롤에 표시되는 텍스트 중지 버튼의 텍스트
stopImage: '', // 문자열 - '중지' 제어에 사용되는 이미지의 파일 경로. 예: 'images/stop.jpg' 중지 버튼 이미지
티커: false, // true, false - 연속 모션 티커 모드(뉴스 티커 생각)
// 참고: autoControls 및 autoControlsSelector가 티커에 적용됩니다! ticketerSpeed: 5000, // 정수 - 속도에 반대 효과가 있으므로 값이 10000이면
// 값이 50이면 매우 빠르게 스크롤되는 반면 매우 느리게 스크롤됩니다.
ticketDirection: 'next', // 'next', 'prev' - 티커 표시가 이동하는 방향
tickerHover: false, // true, false - true인 경우 마우스 오버 시 티커가 일시 중지됩니다.
WrapperClass: 'bx-wrapper', // 문자열 - 슬라이더 래퍼에 첨부된 클래스 이름
StartingSlide: 0, // 정수 - 지정된 슬라이드에서 표시가 시작됩니다. 참고: 슬라이드는 0부터 시작됩니다.
displaySlideQty: 1, // 정수 - 한 번에 표시할 슬라이드 수
moveSlideQty: 1, // 정수 - 한 번에 이동할 슬라이드 수
randomStart: false, // true, false - true인 경우 무작위 슬라이드에서 쇼가 시작됩니다