jQuery 도구 탭(슬라이드쇼)_jquery

<머리>



href="./tabs-slideshow.css"/>


이전



다음



<스크립트 언어="JavaScript">
$(function() {
$(".slidetabs").tabs(".images > div", {
// "크로스 페이딩" 효과 활성화
효과: '페이드 ',
fadeOutSpeed: "slow",
// 마지막 탭 이후 처음부터 시작
rotate: true
// 자체 구성을 허용하는 슬라이드쇼 플러그인 사용
}) .슬라이드쇼()
});

/* 슬라이드용 컨테이너 */
.images {
배경:#fff 반복-x;
테두리:1px 단색 #ccc;
위치:상대적;
높이:300px;
폭:560px;
플로트:왼쪽;
여백:15px;
커서:포인터;
/* 최신 브라우저를 위한 CSS3 조정 */
-moz-border-radius:5px;
-webkit-border-radius:5px;
-moz-box-shadow:0 0 25px #666;
-webkit-box-shadow:0 0 25px #666;
}
/* 단일 슬라이드 */
.images div {
display:none;
위치:절대;
상단:0;
왼쪽:0;
여백:7px;
패딩:15px 30px 15px 15px;
높이:256px;
글꼴 크기:12px;
}
/* 헤더 */
.images h3 {
font-size:22px;
글꼴 두께:일반;
여백:0 0 20px 0;
색상:#456;
}
/* 탭(슬라이드 아래의 작은 원) */
.slidetabs {
clear:both;
왼쪽 여백:310px;
}
/* 단일 탭 */
.slidetabs a {
width:8px;
높이:8px;
플로트:왼쪽;
여백:3px;
배경:url(./navigator.png) 0 0 반복 없음;
디스플레이:블록;
글꼴 크기:1px;
}
/* 마우스 오버 상태 */
.slidetabs a:hover {
background-position:0 -8px;
}
/* 활성 상태(현재 페이지 상태) */
.slidetabs a.current {
background-position:0 -16px;
}
/* 이전 및 다음 버튼 */
.forward, .backward {
float:left;
여백 상단:140px;
배경:#fff url(./hori_large.png) 반복 없음;
디스플레이:블록;
너비:30px;
높이:30px;
커서:포인터;
글꼴 크기:1px;
텍스트 들여쓰기:-9999em;
}
/* 다음 */
.forward { 배경 위치: 0 -30px; 지우기:오른쪽; }
.forward:hover { 배경 위치:-30px -30px; }
.forward:active { 배경 위치:-60px -30px; }
/* prev */
.backward:hover { background-position:-30px 0; }
.backward:active { 배경 위치:-60px 0; }
/* 탐색 버튼이 비활성화되었습니다. 탭이
rotate: true */
.disabled {
visibility:hidden !important로 구성된 경우에는 필요하지 않습니다.
}

$ (function() {
$(".slidetabs").tabs(".images > div", {
// "크로스 페이딩" 효과 활성화
효과: '페이드',
fadeOutSpeed: "slow",
next:'.forward',
prev:'.backward',
// 마지막 탭 이후 처음부터 시작
rotate: true
/ / 슬라이드쇼 플러그인을 사용하세요.
}).slideshow()
});