随机显示
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
试试刷新页面,看看序号是否有变化。
JavaScript
$(function(){ function random(owlSelector){ owlSelector.children().sort(function(){ return Math.round(Math.random()) - 0.5; }).each(function(){ $(this).appendTo(owlSelector); }); } $('#owl-demo').owlCarousel({ beforeInit: function(elem){ random(elem); } }); });
HTML
<div id="owl-demo" class="owl-carousel"> <div class="item orange">1</div> <div class="item darkCyan">2</div> <div class="item yellow">3</div> <div class="item forestGreen">4</div> <div class="item dodgerBlue">5</div> <div class="item skyBlue">6</div> <div class="item zombieGreen">7</div> <div class="item violet">8</div> <div class="item steelGray">9</div> <div class="item dodgerBlue">10</div> <div class="item darkCyan">11</div> <div class="item zombieGreen">12</div> <div class="item orange">13</div> <div class="item forestGreen">14</div> <div class="item skyBlue">15</div> <div class="item darkCyan">16</div> </div>
CSS
#owl-demo { width: 900px; margin-left: auto; margin-right: auto; } #owl-demo .item { margin: 5px; padding: 30px 0; font: 48px arial; text-align: center; color: #fff; }