jQuery Tools tab(幻燈片)

更新時間：2012年07月14日 11:49:12 作者：

老規(guī)矩，先上html和css,還是用官方的，只是去掉了些東西

html

 
<!DOCTYPE html> 
<html> 
<head> 
<title>jQuery Tools standalone demo</title> 
<!-- include the Tools --> 
<script src="http://cdn.jquerytools.org/1.2.7/full/jquery.tools.min.js"></script> 
<link rel="stylesheet" type="text/css" 
href="./tabs-slideshow.css"/> 
</head> 
<body><!-- "previous slide" button --> 
<a class="backward">prev</a> 
<!-- container for the slides --> 
<div class="images"> 
<!-- first slide --> 
<div> 
<h3>First pane</h3> 
<p style="font-weight:bold"> 
Aenean nec imperdiet ligula. Cum sociis natoque penatibus et 
magnis dis parturient montes, nascetur ridiculus mus. 
</p> 
<p> 
Suspendisse potenti. Sed elementum risus eleifend massa 
vestibulum consectetur. Duis massa augue, aliquam eget fringilla 
vel, aliquam vitae arcu. Nam sed magna mi. Praesent odio neque, 
dapibus sit amet suscipit at, tempus sed nibh. Aliquam sagittis 
ligula in ligula faucibus cursus. Quisque vulputate pellentesque 
facilisis. 
</p> 
</div> 
<!-- second slide --> 
<div> 
<h3>Second pane</h3> 
<p style="font-weight:bold"> 
Consectetur adipiscing elit. Praesent bibendum eros ac 
nulla. Integer vel lacus ac neque viverra. 
</p> 
<p> 
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. 
</p> 
</div> 
<!-- third slide --> 
<div> 
<h3>Third pane</h3> 
<p style="font-weight:bold"> 
Non lectus lacinia egestas. Nulla hendrerit, felis quis 
elementum viverra, purus felis egestas magna. 
</p> 
<p> 
Aenean elit lorem, pretium vitae dictum in, fermentum consequat 
dolor. Proin consectetur sollicitudin tellus, non elementum 
turpis pharetra non. Sed quis tellus quam. 
</p> 
</div> 
</div> 
<!-- "next slide" button --> 
<a class="forward">next</a> 
<!-- the tabs --> 
<div class="slidetabs"> 
<a href="#"></a> 
<a href="#"></a> 
<a href="#"></a> 
</div> 
<div style="clear:both;margin:30px 0 0;text-align:center;"> 
<button onClick='$(".slidetabs").data("slideshow").play();'>Play</button> 
<button onClick='$(".slidetabs").data("slideshow").stop();'>Stop</button> 
</div> 
<script language="JavaScript"> 
$(function() { 
$(".slidetabs").tabs(".images > div", { 
// enable "cross-fading" effect 
effect: 'fade', 
fadeOutSpeed: "slow", 
// start from the beginning after the last tab 
rotate: true 
// use the slideshow plugin. It accepts its own configuration 
}).slideshow(); 
}); 
</script> 
</body> 
</html> 

css

復(fù)制代碼代碼如下:

 
/* container for slides */ 
.images { 
background:#fff repeat-x; 
border:1px solid #ccc; 
position:relative; 
height:300px; 
width:560px; 
float:left; 
margin:15px; 
cursor:pointer; 
/* CSS3 tweaks for modern browsers */ 
-moz-border-radius:5px; 
-webkit-border-radius:5px; 
-moz-box-shadow:0 0 25px #666; 
-webkit-box-shadow:0 0 25px #666; 
} 
/* single slide */ 
.images div { 
display:none; 
position:absolute; 
top:0; 
left:0; 
margin:7px; 
padding:15px 30px 15px 15px; 
height:256px; 
font-size:12px; 
} 
/* header */ 
.images h3 { 
font-size:22px; 
font-weight:normal; 
margin:0 0 20px 0; 
color:#456; 
} 
/* tabs (those little circles below slides) */ 
.slidetabs { 
clear:both; 
margin-left:310px; 
} 
/* single tab */ 
.slidetabs a { 
width:8px; 
height:8px; 
float:left; 
margin:3px; 
background:url(./navigator.png) 0 0 no-repeat; 
display:block; 
font-size:1px; 
} 
/* mouseover state */ 
.slidetabs a:hover { 
background-position:0 -8px; 
} 
/* active state (current page state) */ 
.slidetabs a.current { 
background-position:0 -16px; 
} 
/* prev and next buttons */ 
.forward, .backward { 
float:left; 
margin-top:140px; 
background:#fff url(./hori_large.png) no-repeat; 
display:block; 
width:30px; 
height:30px; 
cursor:pointer; 
font-size:1px; 
text-indent:-9999em; 
} 
/* next */ 
.forward { background-position: 0 -30px; clear:right; } 
.forward:hover { background-position:-30px -30px; } 
.forward:active { background-position:-60px -30px; } 
/* prev */ 
.backward:hover { background-position:-30px 0; } 
.backward:active { background-position:-60px 0; } 
/* disabled navigational button. is not needed when tabs are 
configured with rotate: true */ 
.disabled { 
visibility:hidden !important; 
} 

PS：用到些圖片

實例js

復(fù)制代碼代碼如下:

 
$(function() { 
$(".slidetabs").tabs(".images > div", { 
// enable "cross-fading" effect 
effect: 'fade', 
fadeOutSpeed: "slow", 
next:'.forward', 
prev:'.backward', 
// start from the beginning after the last tab 
rotate: true 
// use the slideshow plugin. It accepts its own configuration 
}).slideshow(); 
}); 

這個同html中的js
•配置
配置選項的完整列表的幻燈片插件。

屬性	默認值	描述
next	'.forward'	選擇器進行的元素的“下一個選項卡”行動應(yīng)該綁定。如果您實例化多個幻燈片在相同的頁面上你需要附上所有幻燈片元素(標(biāo)簽/窗格/下 &上一頁動作)在一個共同的包裝器元素。這種邏輯遵循相同的原則作為創(chuàng)建多個選項卡的實例。prev
prev	`'.backward'`	選擇器的兄弟元素“之前的選項卡” 動作應(yīng)該綁定。如果您實例化多個幻燈片與相同的電話,你需要附上所有幻燈片元素 (標(biāo)簽/窗格/下&上一頁動作)在一個共同的包裝器元素。這種邏輯遵循相同原則作為創(chuàng)建多個選項卡的實例。
disabledClass	'disabled'	CSS類名'disabled'`上一頁` 和 `接下來` 元素。例如, 這個 `上一頁` 元素是當(dāng)沒有'disabled'的前面提及的卷軸。
autoplay	false	如果這個屬性設(shè)置為 `真正的` 然后選項卡將自動前進到下一個選項卡實現(xiàn) 自動“玩”的幻燈片。這是方便使 `旋轉(zhuǎn)` 屬性選項卡。
autopause	true	如果這個屬性設(shè)置為 `真正的` ,當(dāng)未來/上一頁選項卡操作按鈕是mouseovered然后autoplay 功能將會暫停。
interval	`3000`	時間(以毫秒為單位)自動走到之間選項卡。只有當(dāng)這個選項是有效的 `自動播放` 是啟用或 autoplay 方法被調(diào)用。
clickable	true	當(dāng)設(shè)置為 `真正的` 然后選項卡將自動推進到下一個選項卡通過單擊可見的窗格。

JavaScript API

方法	返回值	描述/例子
getconf	Object	自從1.2.0 。返回配置對象對于這個插件
getTabs	Tabs	自從1.2.0 。返回一個引用這個標(biāo)簽API 。
play	`API`	開始播放幻燈片。
pause	`API`	暫?；脽羝?回放將恢復(fù)鼠標(biāo)脫離了標(biāo)簽,窗格和導(dǎo)航按鈕。
stop	`API`	停止幻燈片。這只能通過調(diào)用恢復(fù) 這個 play 方法。

事件

確保你已經(jīng)閱讀大約事件 jQuery工具。所有事件監(jiān)聽器接收這個事件對象作為第一個參數(shù)。

事件	觸發(fā)時間
onBeforePlay	開始之前播放。返回 `false` 在回調(diào)防止回放開始。
onPlay	當(dāng)回放開始。
onBeforePause	在播放暫停。返回 `false` 在回調(diào)防止回放開始。
onPause	當(dāng)播放暫停。