EasySlider jQuery 기능 기반 간단 하고 사용 하기 쉬 운 슬라이더 플러그 인

Easy Slider 는 슬라이더 플러그 인 으로 그림 이나 내용 을 지원 하 며 클릭 할 때 가로 또는 세로 로 미 끄 러 집 니 다.그것 은 CSS 를 통 해 완전한 통 제 를 할 수 있 는 일련의 풍부 한 매개 변수 설정 을 가지 고 있다.그래서 기본적으로 이 플러그 인 파일 을 연결 한 후에 내용 을 설정 하고 CSS 를 스타일 링 하면 됩 니 다.Easy Slider 의 기능 은 가로 또는 세로 슬라이딩 을 지원 합 니 다.자동 스크롤 은'이전 화면'과'다음 화면 버튼','첫 화면 까지'와'마지막 화면 까지'단 추 를 연속 으로 미 끄 러 뜨리 는 것 을 지원 합 니 다.정지 간격 등 Easy Slider 의 사용 방법 1.먼저 html 태그

 
<div id="slider"> 
<ul> 
<li>content here...</li> 
<li>content here...</li> 
<li>content here...</li> 
... 
</ul> 
<span id="prevId"><a href="javascript:void(0);">previous</a></span> 
<span id="nextBtn"><a href="javascript:void(0);">Next</a></span> 
</div> 

주:모든 li 안의 내용 은 미끄럼 층 이 고 아래 의 span 은 미끄럼 내 비게 이 션 에 사 용 됩 니 다.2.그리고 jquery 라 이브 러 리 와 Easy Slider 플러그 인

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

주 를 호출 합 니 다.이전 3.플러그 인 코드

 
<script type="text/javascript"> 
$(document).ready(function(){ 
$("#slider").easySlider({ 
prevText: 'previous Slide', 
nextText: 'Next Slide', 
orientation: 'vertical' 
}); 
}); 
</script> 

주 를 초기 화 합 니 다.위 에 있 는 코드 아래 에 놓 습 니 다.그 중\#sidebar 는 HTML 태그 에 있 는 div 요소 에 대응 하 는 CSS 선택 기 입 니 다.스 크 립 트 를 이 층 에 적용 하 는 것 을 가리 키 며 class 이름 을 사용 할 수 있 습 니 다.$("list")와 유사 하 게 쓰 십시오.easyslider 는 많은 인 자 를 가지 고 있 습 니 다.작가 의 원문 을 구체 적 으로 봅 니 다.4.CSS 스타일 정의

 
#slider ul, #slider li{ 
margin:0; 
padding:0; 
list-style:none; 
} 
#slider, #slider li{ 
width:500px; 
height:200px; 
overflow:hidden; 
} 
span#prevBtn{} 
span#nextBtn{} 

주:자신의 필요 에 따라 스타일 화 합 니 다.이렇게 하면 된다.Easy Slider 의 데모 데모기본 설정(좌우 만 뒤 집기)기본 설정(아래 는 디지털 페이지)