jQuery Tools tab(投影片)

最後更新：2018-12-08 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

html 複製代碼代碼如下:<!DOCTYPE html>
<html>
<head>
<title>jQuery Tools standalone demo</title>

<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>
<a class="backward">prev</a>

<div class="images">

<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>

<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>

<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>

<a class="forward">next</a>

<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 複製代碼代碼如下:/* 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 複製代碼代碼如下:$(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'	選取器進行的元素的“下一個選項卡”行動應該綁定。如果您執行個體化多個投影片在相同的頁面上你需要附上所有投影片元素(標籤/窗格/下 &上一頁動作)在一個共同的封裝器元素。這種邏輯遵循相同的原則作為建立多個選項卡的執行個體。prev
prev	`'.backward'`	選取器的兄弟元素“之前的選項卡” 動作應該綁定。如果您執行個體化多個投影片與相同的電話,你需要附上所有投影片元素 (標籤/窗格/下&上一頁動作)在一個共同的封裝器元素。這種邏輯遵循相同原則作為建立多個選項卡的執行個體。
disabledClass	'disabled'	CSS類名'disabled'上一頁和接下來元素。例如, 這個上一頁元素是當沒有'disabled'的前面提及的捲軸。
autoplay	false	如果這個屬性設定為真正的然後選項卡將自動前進到下一個選項卡實現自動“玩”的投影片。這是方便使旋轉屬性選項卡。
autopause	true	如果這個屬性設定為真正的 ,當未來/上一頁選項卡操作按鈕是mouseovered然後autoplay 功能將會暫停。
interval	`3000`	時間(以毫秒為單位)自動走到之間選項卡。只有當這個選項是有效自動播放是啟用或 autoplay 方法被調用。
clickable	true	當設定為真正的然後選項卡將自動推進到下一個選項卡通過單擊可見的窗格。

JavaScript API

方法	傳回值	描述/例子
getconf	Object	自從1.2.0 。返回設定物件對於這個外掛程式
getTabs	Tabs	自從1.2.0 。返回一個引用這個標籤API 。
play	`API`	開始播放投影片。
pause	`API`	暫停投影片。回放將恢複滑鼠脫離了標籤,窗格和導覽按鈕。
stop	`API`	停止投影片。這隻能通過調用恢複這個 play 方法。

事件

確保你已經閱讀大約事件 jQuery工具。所有事件監聽器接收這個事件對象作為第一個參數。

事件	觸發時間
onBeforePlay	開始之前播放。返回 false 在回調防止回放開始。
onPlay	當回放開始。
onBeforePause	在播放暫停。返回 false 在回調防止回放開始。
onPause	當播放暫停。

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More

jQuery Tools tab(投影片)

聯繫我們

A Free Trial That Lets You Build Big!

Sales Support

After-Sales Support