SlidesJS 기본 사용 방법 및 공식 문서 설명 [Jquery 슬라이드 플러그 인 Jquery 앨범 플러그 인]

SlidesJS基本使用方法和官方文档解释 【Jquery幻灯片插件 Jquery相册插件】_第1张图片
Slides – 간단 하고 맞 춤 형 이 며 스타일 화 되 기 쉬 운 jQuery 슬라이드 플러그 인 입 니 다.
Slides 는 탈색 이나 슬라이드 과도 효 과 를 제공 합 니 다. 이미지 페이드아웃, 이미지 프 리 스트레스, 페이지 자동 생 성, 순환, 자동 재생 사용자 정의 등 여러 옵션 을 제공 합 니 다.
슬라이드 플러그 인 을 사용 하면 슬라이드 를 무 작위 로 재생 할 수 있 습 니 다. 슬라이드 를 시작 하려 는 세트 를 설정 할 수 있 습 니 다.그것 은 충분 한 설명 과 예 시 를 첨부 한다.
DEMO 주소:http://slidesjs.com/
홈 페이지 주소:http://slidesjs.com/
다운로드 주소:http://slidesjs.com/downloads/slides.zip
기본 HTML 구조
<div id="slides">
  <div class="slides_container">
    <div>
      <h1>Slide 1</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </div>
    <div>
      <h1>Slide 2</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </div>
    <div>
      <h1>Slide 3</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </div>
    <div>
      <h1>Slide 4</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </div>
  </div>
</div>

기본 CSS 코드
<style type="text/css" media="screen">
  .slides_container {
    width:470px;
    height:170px;
  }
  .slides_container div {
    width:470px;
    height:170px;
    display:block;
  }
</style>

기본 적 인 자 바스 크 립 트 코드 초기 화
<script>
  $(function(){
    $("#slides").slides();
  });
</script>

공식 문서 해석 (버 전 1.1.9)
preload(boolean)
매개 변수 설정 
true 앨범 에 있 는 사진 을 불 러 오 는 과정 에서
로 딩 그림 보이 기
false
보이 지 않 음 그림 불 러 오기
기본 값 은: 
false
preloadImage(string)
이 속성 은 보통 하 나 를 따라 갑 니 다. 
preload(boolean) 같이 사용 하면 string 안의 값 은 표시 해 야 할 것 을 표시 합 니 다.
그림 의 를 불 러 옵 니 다 
경로 주소
기본 값 은:
"/img/loading.gif"
container(string)
그림 층 의 최상 위 div 설정 
스타일 이름
기본 값 은:
"slides_container"
generateNextPrev(boolean)
자동 생 성 여부 설정
이전 다음 버튼
기본 값 은:
false
next(string)
자동 생 성의
다음 단추 스타일 이름
기본 값 은:
"next"
prev(string)
자동 생 성의
이전 단추 스타일 이름
기본 값 은:
"prev"
pagination(boolean)
그림 을 페이지 별로 표시 하지 않 으 면 설정 할 수 있 습 니 다.
false, 하지만 필요 없습니다. 설정 하지 않 는 것 을 추천 합 니 다.
$(function(){
  $("#slides").slides({
    preload: true
  });
});

generatePagination(boolean)
자동 생 성 여부 설정
페이지 탐색 계층
기본 값 은:
true
paginationClass(string)
설치 하 다.
페이지 탐색 층 의
스타일 이름
기본 값 은:
"pagination"
currentClass(string)
페이지 탐색 층 설정 중
현재 페이지 항목 의
스타일 이름
기본 값 은:
"current"
계속...

좋은 웹페이지 즐겨찾기