Twitter Bootstrap Carousel:随机化图像顺序

Question

我正在使用Twitter Bootstrap的轮播脚本制作一个标识炫耀旋转木马.徽标应随机排序,每次用户刷新页面时都要随机播放

我在Google上搜索了很多找到了一些解决方案,但没有一个能为我工作,我不知道会发生什么......无论如何:

这是小提琴:http://jsfiddle.net/HGWMy/1/

<div id="carousel-example-generic" 
     class="carousel slide" 
     data-ride="carousel" 
     style="width: 180px; margin: 0 auto">

    <!-- Wrapper for slides -->
    <div class="carousel-inner">
        <div class="item active">
            <a href="#"><img src="http://i.imgur.com/jSfZIJK.png" alt="Vale"></a>
        </div>
        <div class="item">
            <a href="#"><img src="http://i.imgur.com/z2FyBAt.png" alt="Petrobras"></a>
        </div>
        <div class="item">
            <a href="#"><img src="http://i.imgur.com/mZtv0bA.png" alt="IGAM"></a>
        </div>
        <div class="item">
            <a href="#"><img src="http://i.imgur.com/tqgQxbq.png" alt="Arcelor Mittal"></a>
        </div>
    </div>
</div>

<script>
jQuery(document).ready(function($) {
  $('.carousel').carousel({
    interval: 1000
  })
});
</script>

Answer 1

您可以div在加载轮播之前随机播放一系列图像并构建s ...

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel" style="width: 180px; margin: 0 auto">
    <!-- Wrapper for slides -->
    <div class="carousel-inner"></div>
</div>

jQuery(document).ready(function ($) {
    var images = [{
        url: "http://i.imgur.com/jSfZIJK.png",
        alt: "Vale"
    }, {
        url: "http://i.imgur.com/z2FyBAt.png",
        alt: "Petrobras"
    }, {
        url: "http://i.imgur.com/mZtv0bA.png",
        alt: "IGAM"
    }, {
        url: "http://i.imgur.com/tqgQxbq.png",
        alt: "Arcelor Mittal"
    }];

    // http://css-tricks.com/snippets/javascript/shuffle-array/
    images.sort(function () { return 0.5 - Math.random(); });

    $.each(images, function (index, image) {

        var element = $('<div class="item"><a href="#"><img src="' + image.url + '" alt="' + image.alt + '" /></a></div>')

        if (index === 0) {
            element.addClass("active");   
        }

        element.appendTo("div.carousel-inner");
    });

    $('.carousel').carousel({
      interval: 1000,
    })
});

小提琴:http://jsfiddle.net/HGWMy/5/