随机显示

试试刷新页面,看看序号是否有变化。

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

dowebok.com 说 明 下 载