"切換按鈕"
Bootstrap 3.3.0 Snippet by taironlife

Post to Facebook Tweet this

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<link rel="stylesheet" href="http://www.bootcss.com/p/bootstrap-switch/static/stylesheets/bootstrapSwitch.css">
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/js/google-code-prettify/prettify.css">
<div class="container">
<div class="row">
<h2 class="text-center">切換按鈕</h2>
<div class="switch switch-large">
<input type="checkbox" checked />
</div>
<div class="switch">
<input type="checkbox" checked />
</div>
<div class="switch switch-small">
<input type="checkbox" checked />
</div>
<div class="switch switch-mini">
<input type="checkbox" checked />
</div>
<div class="switch" data-on="primary" data-off="info">
<input type="checkbox" checked />
</div>
<div class="switch" data-on="info" data-off="success">
<input type="checkbox" checked />
</div>
<div class="switch" data-on="success" data-off="warning">
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
$(document).ready(function() {
var $aaa = $('.aaa').toArray();
var size = $aaa.length;
//將 aaa 類別的元素讀成陣列，並計算總共有幾個元素要被輪播
var i = 0;
delayedUpdatelist(i);
//初始輪播效果，從第 0 個元素開始播，輪播效果的 function 在下面
function delayedUpdatelist(x) {
if(x <= size){
$('.aaa:eq('+x+')').show("slow").delay(7000).fadeOut("slow");
//指定要被輪播的元素還沒大於要被播放的總數時，
//就 show 出元素，停留 7 秒，然後 fadeOut
//這裡的播放效果可以改自己想要的，fadeIn、fadeOut、show…anything！
setTimeout(function(){ delayedUpdatelist(x+1) }, 8000);
//用 setTimeout 讓程式在這裡暫停一下，等一個播完再呼叫 function 去播下一個
//不然會造成上一個元素還在 delay 的時候下一個元素就跟著跑出來了
} else {
x = 0;
$('.aaa:eq('+x+')').show("slow").delay(7000).fadeOut("slow");
setTimeout(function(){ delayedUpdatelist(x+1) }, 8000);
//若指定要被輪播的元素已大於被輪播的總數，就將 x 設為 0，重頭播放第 0 個元素。
}
}
});
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Now UI Kit

Questions / Comments: