"切換按鈕"
Bootstrap 3.3.0 Snippet by taironlife

<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"> <input type="checkbox" checked /> </div> <div class="switch" data-on="warning" data-off="danger"> <input type="checkbox" checked /> </div> <div class="switch" data-on="danger" data-off="primary"> <input type="checkbox" checked /> </div> <div class="switch" data-animated="false"> <input type="checkbox" checked /> </div> <div class="switch"> <input type="checkbox" checked disabled /> </div> <div class="switch" data-on-label="SI" data-off-label="NO"> <input type="checkbox" checked /> </div> </div> </div> <script src="http://www.bootcss.com/p/bootstrap-switch/static/js/bootstrapSwitch.js"></script> <script src="http://www.bootcss.com/p/projects.js"></script>
$(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 個元素。    }   } });

Related: See More


Questions / Comments: