<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">Create your snippet's HTML, CSS and Javascript in the editor tabs</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>

/*每個要輪播的元素都先隱藏且重曡*/ .aaa { display:none; z-index:20; position:absolute; }

$(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 個元素。 　　　} 　　} });