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

html

复主代码 代码如下:

<머리>



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


이전

첫 번째 창

Aenean nec imperdiet ligula. Cum sociis natoque penatibus et
magnis dis parturient montes, nascetur Ridiculus mus.

일시 중지 가능성. Sed elementum risus eleifend Massa
vestibulum consectetur. Duis Massa augue, aliquam eget fringilla
vel, aliquam vitae arcu. 남 세드 마그나 미. Praesent odio neque,
dapibus sit amet suscipit at, tempus sed nibh. Aliquam sagittis
ligula faucibus cursus의 ligula. Quisque vulputate pellentesque
촉진성.

두 번째 창

Consectetur adipiscing elit. Praesent bibendum eros ac
nulla. 정수 vel lacus ac neque viverra.

Vivamus euismod euismod sagittis. Etiam cursus neque non lectus
mattis cursus et a libero. Vivamus condimentum hendrerit metus,
a sollicitudin magna vulputate eu. Donec sed Tincidunt
lectus. Donec Tellus lectus, fermentum sit amet porta non,
rhoncus ac mi. Quisque placerat auctor justo, a egestas urna
tincidunt eleifend.

세 번째 창

비렉투스 라시니아 에게스타스. Nulla hendrerit, felis quis
elementum viverra, purus felis egestas magna.

Aenean elit lorem, pretium vitae dictum in, fermentum consequat
dolor. Proin consectetur sollicitudin Tellus, non elementum
turpis pharetra non. Sed quis Tellus quam.

다음

재생
중지

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

css

复主代码 代码如下:

/* 슬라이드용 컨테이너 */
.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로 구성된 경우에는 필요하지 않습니다.
}

PS:용到些图그림

实例js

复主代码 代码如下:

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

이것은 HTML의 동일한 js입니다.
•구성
전체 구성 옵션 목록이 포함된 슬라이드쇼 플러그인입니다.
이전선택자의 형제 "이전 탭" 작업이 바인딩되어야 합니다. 동일한 호출로 여러 슬라이드를 인스턴스화하는 경우 모든 슬라이드 요소(탭/창/다음 및 이전 작업)를 공통 래퍼 요소로 묶어야 합니다. 이 논리는 여러 탭을 만드는 경우와 동일한 disabledClass자동재생자동 일시중지간격

속성	기본값	설명
다음	'.forward'	요소에 대해 "다음 탭" 작업을 수행하는 선택기가 바인딩되어야 합니다. 동일한 페이지에서 여러 슬라이드를 인스턴스화하는 경우 모든 슬라이드 요소(탭/창/다음 및 이전 페이지 작업)를 공통 래퍼 요소로 묶어야 합니다. 이 논리는 여러 탭 인스턴스를 만드는 것과 동일한 원칙을 따릅니다. 이전
<span id="OUTFOX_JTR_TRANS_NODE-44" class="OUTFOX_JTR_TRANS_NODE"><br>'.backward'</span>	<span id="OUTFOX_JTR_TRANS_NODE-44" class="OUTFOX_JTR_TRANS_NODE"><span>'.backward'</span></span>	원칙을 따릅니다.
'비활성화'	CSS 클래스 이름'disabled'	이전 페이지 및 계속 아래로 요소. 예를 들어 이전 요소는 앞서 언급한 스크롤에 'disabled'가 없는 경우입니다.
거짓	이 속성이	true 로 설정되면 탭이 자동으로 다음 탭으로 이동하여 슬라이드쇼가 자동으로 "재생"됩니다. 속성 탭을 회전시켜 주면 편리합니다.
그렇습니다	이 속성이	true로 설정된 경우 다음/이전 탭 작업 버튼에 마우스를 올리면 자동 재생 기능이 중단됩니다.
<span id="OUTFOX_JTR_TRANS_NODE-70" class="OUTFOX_JTR_TRANS_NODE">3000<span></span></span>	탭 사이를 자동으로 이동하는 데 걸리는 시간(밀리초)입니다. 이 옵션은 <span id="OUTFOX_JTR_TRANS_NODE-70" class="OUTFOX_JTR_TRANS_NODE">3000</span>	자동 재생 이 활성화되거나 자동 재생 메소드가 호출됩니다.
클릭 가능	그렇습니다	true 로 설정하면 보이는 창을 클릭하면 탭이 자동으로 다음 탭으로 이동합니다.

자바스크립트 API

方法	返回值	描述/例子
getconf	Object	自从1.2.0 。 返回配置对象 对于这个插件
getTabs	Tabs	自从1.2.0 。 返回一个引用 这个 标签API 。
play	<span id="OUTFOX_JTR_TRANS_NODE-96" class="OUTFOX_JTR_TRANS_NODE">API</span>	开始播放幻灯片。
pause	<span id="OUTFOX_JTR_TRANS_NODE-99" class="OUTFOX_JTR_TRANS_NODE">API</span>	暂停幻灯片。 回放将恢复鼠标脱离了标签,窗格和导航按钮。
stop	<span id="OUTFOX_JTR_TRANS_NODE-102" class="OUTFOX_JTR_TRANS_NODE">API</span>	停止幻灯片。 这只能通过调用恢复 这个 play 方法。

방법 반환 값

설명/예

getconf 객체 1.2.0 이후 . 이 플러그인에 대한 구성 개체를 반환합니다.

事件	触发时间
onBeforePlay	开始之前播放。 返回 false 在 回调防止回放开始。
onPlay	当回放开始。
onBeforePause	在播放暂停。 返回 false  在 回调防止回放开始。
onPause	当播放暂停。

getTabs 탭 1.2.0 이후 . 이 태그 API 에 대한 참조를 반환합니다. 놀이 <span id="OUTFOX_JTR_TRANS_NODE-96" class="OUTFOX_JTR_TRANS_NODE">API</span> 슬라이드쇼를 시작합니다. 일시 중지 <span id="OUTFOX_JTR_TRANS_NODE-99" class="OUTFOX_JTR_TRANS_NODE">API</span> 슬라이드쇼를 일시중지합니다. 마우스가 탭, 창 및 탐색 버튼에서 벗어나면 재생이 다시 시작됩니다. 그만 <span id="OUTFOX_JTR_TRANS_NODE-102" class="OUTFOX_JTR_TRANS_NODE">API</span> 슬라이드쇼를 중지합니다. 이는 재생 메소드를 호출해야만 복원할 수 있습니다. 이벤트 이벤트 jQuery 도구를 읽어보세요. 모든 이벤트 리스너는 첫 번째 매개변수로 이벤트 객체 를 받습니다. onBeforePlay 시작하기 전에 재생하세요. 재생이 시작되지 않도록 콜백에 false 를 반환합니다. onPlay 재생이 시작될 때. onBeforePause 재생이 일시중지되었습니다. 콜백의 Back TRANS_NODE> 재생이 시작되지 않도록 합니다. onPause 재생이 일시 정지된 경우.

이벤트	트리거 시간